I want to display a div when an input field is focused(active?)
In the following code, I want to display .text when .input is focused.
I'm trying this:
HTML :
<div class="box">
<input class="input" type="text" value="" />
<div class="text">text</div>
</div>
CSS :
.text { display: none; }
.input:focus .text { display: block; }
Example :
JSFiddle
You need to use the sibling CSS selector:
.input:focus + .text{
display: block;
}
Updated Fiddle
You can also use general sibling selector ~ :
.input:focus ~ .text { display: block; }
JSFiddle
Related
Following the selector rules, when checking whether the checkbox is checked, the ~ selector should apply display: none; in the span elements, but this is not happening.
both the input has the same parent element
and spans are preceded by input.
Because it does not work?
https://codepen.io/fx-hunter/pen/MWBaPBW?editors=1100
I tried this
.wrapper .content-input .botao:checked~.wrapper .content-input span {
display: none;
}
<div class="wrapper">
<div class="content-input">
<input class="botao" type="checkbox" />
<span>off</span>
<span>on</span>
</div>
</div>
This is happening because you are using ~ selector with intention of getting the ancestor but ~ selector is to get sibling of previous selector.
To fix this use
.wrapper .content-input .botao:checked ~ span {
display: none;
}
The two sequences share the same parent in the document tree, so there's no need to call the span by saying .wrapper .content-input span. Just saying span works fine!
.wrapper .content-input .botao:checked ~ span {
display: none;
}
Its working but you are targetting elements wrong. So, its causing the issue.
/*
.botao:checked {
display: none;
}
*/
.botao:checked ~ span {
display: none;
}
<div class="wrapper">
<div class="content-input">
<input class="botao" type="checkbox">
<span>off</span>
<span>on</span>
</div>
</div>
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 months ago.
<div class="input-container">
<label>Input Label</label>
<input />
</div>
This is the html, I want to resize and reposition the label test when the input focus is active
my css looks something like this
.input-container > input:focus .input-container > label {
color: green;
}
For this example, is there a way to change the label text color to green when the input is focussed? Thank you, I know this is easy with JS, I am looking for an all css solution though
I think something like this would work:
.label {
color: blue;
}
.input-container:focus-within .label {
color: green;
}
<div class="input-container">
<label class="label">Input Label</label>
<input class="input" />
</div>
(this allows you to change the color of the label element whenever the focus is on any of the .input-container child elements)
As per the comments:
"A CSS rule can only affect sibling elements after the current element. So you would need the input to be before the label in the markup to be able to do this"
So you will have to put the input first. Then you can use flex with row-reverse on .input-container to re-adjust the order. Then just use the sibling selector ~ to style the label when input:focus.
.input-container {
display: flex;
flex-flow: row-reverse;
justify-content: start;
}
input {
margin-left: .5em;
}
.input-container > input:focus ~ label {
color: green;
}
<div class="input-container">
<input>
<label>Input Label</label>
</div>
If you can change the order of the markup, you can use the sibling selector (+) Documentation
.input-container > input:focus + label {
color: green;
}
<div class="input-container">
<input />
<label>Input Label</label>
</div>
You can use CSS to position the label/input differently (visually), as long as the markup remains the same.
I am trying to make a collapsible button with pure HTML and CSS. Here is what I have:
#hidden {
display: none;
height: 100px;
background: red;
}
:checked+#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>
<label for="my_checkbox">Show/hide</label>
This works. However, I want the hidden div to come after the button instead of before. When I move the div to after the checkbox label, it does not work.
How can I fix this ?
Thanks!
You want to use a different CSS selector. The below uses the General sibling combinator to target the div no matter its order with respect to the input element (so long as it follows it).
#hidden {
display: none;
height: 100px;
background: red;
}
:checked ~ #hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
use negation instead of +, so that it will select all divs related to that class name
#hidden {
display: none;
height: 100px;
background: red;
}
:checked~#hidden {
display: block;
}
<input type="checkbox" id="my_checkbox" style="display:none;">
<label for="my_checkbox">Show/hide</label>
<div id="hidden"></div>
I have a very basic checkbox hack I'm using for selecting different items.
It does exactly what I want it to do: namely, clicking on the label allows me to select the corresponding figure:
input[type="checkbox"] { display:none; }
.wrap { width: 50%; }
.wrap label { display: inline-block;}
.checker {background: red; padding: 50px;}
.checker figure { margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
.wrap input:checked ~ .checker { display: none; }
.wrap input:checked + label { color: blue; }
.wrap #check1cont:checked ~ .check1 {display: inline-block;}
.wrap #check2cont:checked ~ .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<label class="check1cont" for="check1cont">Check 1</label>
<input type="checkbox" name="controllers" id="check2cont">
<label class="check2cont" for="check2cont">Check 2</label>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</div>
But I want the controllers/labels to be aligned on the left side, with the figures on the right. Ideally, I'd like to be able to do this with flex, so the labels are housed in a responsive, left-aligned div.
I've tried adding the divs with different sibling and child selectors, but I'm new to all of this, and I don't think I've gotten the right combination (or else I'm doing something else wrong, or else it's impossible).
Can anyone recommend a means of doing this?
Thank you in advance.
The hidden checkbox tricks works because the checkboxes themselves can be anywhere in relation to the labels. So put the checkboxes first, and the labels in a separate container following them, and you can control both the labels and the figures with the :checked state of the checkboxes.
.wrap { display:flex; width:50%; vertical-align:top;}
.wrap aside {vertical-align:top;}
.wrap label {white-space:nowrap; display: block;}
.checker {background: red; padding: 50px; vertical-align:top;}
.checker {margin: 10px; display: inline-block; position: relative;}
.wrap input { display: none; }
input:checked ~ main .checker { display: none; }
#check1cont:checked ~ aside .check1cont,
#check2cont:checked ~ aside .check2cont { color: blue; }
#check1cont:checked ~ main .check1,
#check2cont:checked ~ main .check2 {display: inline-block;}
<div class="wrap">
<input type="checkbox" name="cont" id="check1cont">
<input type="checkbox" name="controllers" id="check2cont">
<aside>
<label class="check1cont" for="check1cont">Check 1</label>
<label class="check2cont" for="check2cont">Check 2</label>
</aside>
<main>
<figure class="checker check1">CHECK 1</figure>
<figure class="checker check2">CHECK 2</figure>
</main>
</div>
Note: as was remarked in the comments, the code is a simplification of the real code, so I had to clean up the css a bit. You probably have to un-clean it up to make it work for the real code again!
I am trying to close a div when a checkbox is clicked with css only not JQuery or Javascript but it seems not working properly. How can I adjust it?
div[id^="div-"] {
display: block;
}
div[id^="div-"]:target {
display: none;
}
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
How can I link the <a> click and the checkbox?
I think the only way to do this with pure css would be to have the checkbox as a direct sibling to the div:
#div-1 {display:none}
#checkbox:checked + #div-1 {display:block;}
<input id="checkbox" type="checkbox" checked>
<div id="div-1">
Here is the content.
</div>
#text{
width:100px;
height:100px;
background:black;
}
input[type=checkbox]:checked ~ #text{
display:none;
}
<input type="checkbox" name="check" value="checked">Click here<br>
<div id="text"></div>
Using only CSS you can do something like this.
JSFiddle
The + is the adjacent sibling selector, more info at https://developer.mozilla.org/en/docs/Web/CSS/Adjacent_sibling_selectors
#close + #div-1 {
display: none;
}
#close:checked + #div-1 {
display: initial;
}
<input id="close" type="checkbox" checked />
<div id="div-1">Here is the content.</div>
First you should remove the anchor and just let the input element because this trick that i'm showing needs elements in the same level or the second element be in lower levels of html structure.
<input type="checkbox" checked>
<div id="div-1">
Here is the content.
</div
css
div[id^="div-"] {
display: block;
}
input:checked ~ div[id^="div-"] {
display: none;
}
jsfiddle