I am looking to have the 'item value appears here' to be hidden by default on landing on the page or refreshing. I am using a checkbox with a label to be used as the show/hide click. This appears in 3 columns and currently clicking 'show' on the left column makes all 3 item values appear (this is not a problem and as I do not wish to use JavaScript, happy with this, although if clicking on one only unhides one value with css then I'm all ears!).
I am not able to use JavaScript and feel there must be a way to do this with CSS using checkboxes - any help will be greatly appreciated!
<div class="key-items-wrapper">
<div class="left-column">
<img src="/images/item.png">
<div class="center-column-text">
<p>item name</p>
<div class="content">
<p>item value appears here</p>
</div>
<input id="checkbox-privacymode" type="checkbox">
<label for="checkbox-privacymode"></label>
</div>
</div>
This is the code for the checkbox
#checkbox-privacymode {
display: none;
visibility:hidden;
}
#checkbox-privacymode + label {
display: block;
padding-right: 52px;
height: 35px;
background: transparent url(/images/eye-hidden.png) no-repeat scroll right center;
float: right;
font-size: 0.9em;
color: #777;
cursor: pointer;
}
#checkbox-privacymode + label::before {
content: 'hide';
}
#checkbox-privacymode:checked + label {
background-image: url(/images/eye.png);
display:block;
}
#checkbox-privacymode:checked + label::before {
content: 'show';
}
Many Thanks
Change <input id="checkbox-privacymode" type="checkbox"> to <input id="checkbox-privacymode" type="checkbox">
You will need to reposition your HTML elements so that the message is immediately after the checkbox.
Once the message is correctly positioned in the HTML code, in CSS you can select the message like this:
#checkbox-privacymode:checked + p {
display: none;
}
Related
Just wondering if a div can be called without using javascript.
such as
my_div:hover{ add new layout}
is there a version for click eg
my_div:click{add new layout}
Thanks
Yes, if you add tabindex="0" to your div, you make it clickable and can then use the :focus pseudo-class to apply styles.
<div class="clickable" tabindex="0"></div>
.clickable {
height: 100px;
background: blue;
}
.clickable:focus {
background: red;
}
Codepen example. Clicking the div should give it focus and apply the :focus CSS to it. Clicking away from it will unfocus (blur) it and reset the default styles.
Not directly, but you can fake it using checkboxes:
input[type=checkbox] {
display: none;
}
.content {
display: none;
padding: 20px;
background-color: #dadada;
}
input[type=checkbox]:checked+label+.content {
display: block;
}
<input type="checkbox" id="check">
<label for="check">Click me</label>
<div class="content">
<h3>Content</h3>
<p>lorem20</p>
</div>
I m having problem with css of a tooltip. Tooltip belongs to an input field and if an other checkbox is checked, this tooltip needs to be placed correctly on the input field. so the check box is :
<input type="checkbox" id="telefonBox" />
and the input field which tooltip needs to be placed :
<input type="text" class="form-control tooltip-berater" id="agentName"/>
What i tried is
input[id=telefonBox]:checked + .tooltip-berater + .tooltip > .tooltip-inner {top: 875px !important; left: 30px; max-width:300px;}
(Basically i m trying to write: if a checkbox with this id checked, then do some stuff in this css classes)
But doesnt function at all. What am i missing?
If both inputs are children of the same div, but not directly next to each other (in the HTML markup) then you need to use ~ operator instead of +.
+ works like:
<div class="parent">
<div class="first"></div>
<div class="second></div>
</div
.first + .second {
// do stuff with second
}
~ works like:
<div class="parent">
<div class="first"></div>
<div class="inbetween"></div>
<div class="second"></div>
</div
.first ~ .second {
// you can still do stuff with second
}
There is no selector which would help you in other cases possible in your HTML markup, especially:
When .second div is placed earlier than .first
When .second div has different parent from .first
In those cases you will need to use JavaScript to select and change your element's CSS.
Heres a fiddle i made that changes colour of input box: https://jsfiddle.net/8we5u1vs/
Is that the kind of thing you want? Obviously its much simpler than what you're talking about. You havnt added much code so hard to tell, could you show code or fiddle for an example of the tooltip?
input[id=telefonBox]:checked + .tooltip-berater {
background-color:red;
}
You can try this way, but text input is still available via tab key.
div {
display: inline-block;
position: relative;
line-height: 1.25em;
border: 1px solid;
background: white;
}
input[type=text] {
border: 1px solid white;
line-height: inherit;
}
span {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
text-align: center;
display: none;
border: 1px solid white;
background: white;
}
input[type=checkbox]:checked + div span {
display: block;
}
<input type=checkbox>
<div>
<input type=text>
<span>N/A</span>
</div>
I have a problem, I have this input text fields in a html form, this are wrapped for this div css properties:
.formRight240 { float: left; width: 240px; margin: 5px 12px 5px 0px; }
when I try to this
.field_required{ display: inline; color: red; }
.field_required:after{ content: "*" }
the input text field stay the same and the asterisk jump to the next line, I know the reason, everything is aligned in order to the other elements around, but is there anything I can do to display the asterisk inline with the input text field by doing changes to the field_required class? if not, what I have to change to the .formRight240.
HTML
<div class="rowElem noborder">
<label>Customer ID:</label>
<div class="formRight240">
<span class="field_required"><input type="text" name="p_cust_id_c" id="req" class="validate[required,maxSize[30]]"/></span>
</div>
<div class="fix"></div>
</div>
Check this answer, you can't add :before or :after to an input.
A solution could be to wrap your input in a span:
HTML
<span class="field_required"><input type="text" /><span>
CSS
.field_required input {
display: inline;
color: red;
}
.field_required:after{
content: "*";
}
DEMO
I need to set it with CSS, not jquery.
The selector is for
all labels which do not have a sibling that is a checkbox or radio component.
a sample is:
<span>
<input id="item" type="checkbox">
<label for="item">Data</label>
</span>
This is because i have CSS which sets label to 12px, BUT it affects asp:checkboxes and asp:radio..., but i do not want them to be affected.
There isn't a CSS selector for an element that doesn't have a sibling of a certain kind.
But if you can guarantee that your structure is always an input followed by a label, then you could use the next-sibling combinator with :not() like so to match the label:
input:not([type="checkbox"]):not([type="radio"]) + label
Otherwise you're going to have to add classes to those labels, or use jQuery.
Try adjacent sibling selector:
input[type='text'] + label { // your styles }
You need to apply it to all predecessors you need namely. But there are not many possibilities to use label for besides checkbox and radios you don't want ;)
DEMO
You can select elements based on what kinds of siblings they have, IF the siblings precede your target elements. You can do however much type/selector checking you want on preceding siblings of your target.
You can kind of go backwards using nth-last-of-type and nth-last-child, but you can't do any selector checking on elements which follow your target, and the only kind of type checking you can do on following elements is counting how many there are of the same type.
So in your case you could use:
label {
/* your styling here */
}
input[type="checkbox"] + label, input[type="radio"] + label {
/* remove the styling for labels preceded by a checkbox or radio button */
}
Use ~ instead of + if you expect other elements between your inputs and labels.
Depending on what other elements might be inside the spans that you're working with, any of the 'nth' pseudoclasses may be useful to you.
This would also work for your example, if all you care about is that the labels don't have a preceding sibling:
label:first-child {
/* awesome styles */
}
I submitted an answer to a question that I feel is extremely valuable and along the lines to what you're asking for in this question. Here is the permalink to that question/answer.
https://stackoverflow.com/a/43132408/6167697
The key thing that is missing that may not work for your case is I propose keeping the inputs a child only to what they need to be so that other content can be selector'd using generic sibling selectors. Hypothetically you could still keep them in the span, and then use the labels in various elements inside the span, and that would still allow you treat those labels separate from any others I would think. I'll copy in a code snippet for a working example that demonstrates label elements that are not siblings to their inputs that can still be styled.
* {
padding: 0;
margin: 0;
background-color: #262626;
color: white;
}
.radio-button {
display: none;
}
#filter {
padding: 5% 0;
display: flex;
justify-content: center;
}
.filter-label {
display: inline-block;
border: 4px solid green;
padding: 10px 20px;
font-size: 1.4em;
text-align: center;
cursor: pointer;
}
main {
clear: left;
}
.content {
padding: 3% 10%;
display: none;
}
h1 {
font-size: 2em;
}
.date {
padding: 5px 30px;
font-style: italic;
}
.filter-label:hover {
background-color: #505050;
}
#featured-radio:checked~#filter .featured,
#personal-radio:checked~#filter .personal,
#tech-radio:checked~#filter .tech {
background-color: green;
}
#featured-radio:checked~main .featured {
display: block;
}
#personal-radio:checked~main .personal {
display: block;
}
#tech-radio:checked~main .tech {
display: block;
}
<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">
<header id="filter">
<label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>
<label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>
<label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>
</header>
<main>
<article class="content featured tech">
<header>
<h1>Cool Stuff</h1>
<h3 class="date">Today</h3>
</header>
<p>
I'm showing cool stuff in this article!
</p>
</article>
<article class="content personal">
<header>
<h1>Not As Cool</h1>
<h3 class="date">Tuesday</h3>
</header>
<p>
This stuff isn't nearly as cool for some reason :(;
</p>
</article>
<article class="content tech">
<header>
<h1>Cool Tech Article</h1>
<h3 class="date">Last Monday</h3>
</header>
<p>
This article has awesome stuff all over it!
</p>
</article>
<article class="content featured personal">
<header>
<h1>Cool Personal Article</h1>
<h3 class="date">Two Fridays Ago</h3>
</header>
<p>
This article talks about how I got a job at a cool startup because I rock!
</p>
</article>
</main>
That has the added benefit of being pure CSS too! And as per the other post, here's the JSFIDDLE so you can play around with it yourselves.
I use anchor as my site navigation.
<div id='nav'>
<a href='#abouts'>
<div class='navitem about'>
about
</div>
</a>
<a href='#workss'>
<div class='navitem works'>
works
</div>
</a>
</div>
The CSS
#nav {
margin-left: 50px;
margin-top: 50px;
text-transform: uppercase;
}
.navitem {
background: #333;
color: white;
width: 230px;
height: 50px;
font-size: 25px;
line-height: 50px;
padding-left: 20px;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
margin-top: 10px;
}
.about:hover {
background: #cc00ff;
}
.about:active {
background: #ff00ff;
color: #000;
width: 250px;
}
.works:hover {
background: #0066FF;
}
.works:active {
background: #0099cc;
color: #000;
width: 250px;
}
I'm wondering how to keep the div element style keep in the :active state once after the click until I hit another nav bar item, so how to do it?
Combine JS & CSS :
button{
/* 1st state */
}
button:hover{
/* hover state */
}
button:active{
/* click state */
}
button.active{
/* after click state */
}
jQuery('button').click(function(){
jQuery(this).toggleClass('active');
});
The :target-pseudo selector is made for these type of situations: http://reference.sitepoint.com/css/pseudoclass-target
It is supported by all modern browsers. To get some IE versions to understand it you can use something like Selectivizr
Here is a tab example with :target-pseudo selector.
I FIGURED IT OUT. SIMPLE, EFFECTIVE NO jQUERY
We're going to to be using a hidden checkbox.
This example includes one "on click - off click 'hover / active' state"
--
To make content itself clickable:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked ~ label
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<label for="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
</label>
To make button change content:
#activate-div{display:none}
.my-div{background-color:#FFF}
#activate-div:checked +
.my-div{background-color:#000}
<input type="checkbox" id="activate-div">
<div class="my-div">
//MY DIV CONTENT
</div>
<label for="activate-div">
//MY BUTTON STUFF
</label>
Hope it helps!!
You can use a little bit of Javascript to add and remove CSS classes of your navitems. For starters, create a CSS class that you're going to apply to the active element, name it ie: ".activeItem". Then, put a javascript function to each of your navigation buttons' onclick event which is going to add "activeItem" class to the one activated, and remove from the others...
It should look something like this: (untested!)
/*In your stylesheet*/
.activeItem{
background-color:#999; /*make some difference for the active item here */
}
/*In your javascript*/
var prevItem = null;
function activateItem(t){
if(prevItem != null){
prevItem.className = prevItem.className.replace(/{\b}?activeItem/, "");
}
t.className += " activeItem";
prevItem = t;
}
<!-- And then your markup -->
<div id='nav'>
<a href='#abouts' onClick="activateItem(this)">
<div class='navitem about'>
about
</div>
</a>
<a href='#workss' onClick="activateItem(this)">
<div class='navitem works'>
works
</div>
</a>
</div>
If you want to keep your links to look like they are :active class, you should define :visited class same as :active so if you have a links in .example then you do something like this:
a.example:active, a.example:visited {
/* Put your active state style code here */ }
The Link visited Pseudo Class is used to select visited links as says the name.