Select next element when input is checked

Question

HTML:

<label>
  <input type="checkbox" />
</label>
<div>
  stuff
</div>

I'd like to be able to style the DIV element depending on the checked state of the input, like

input ~ div{
  display: none;
}

input:checked ~ div{
  display: block;
}

Obviously the~ selector doesn't seem to work here. Neither does +

Is there any other solution (besides javascript) ?

The answer is a mix of http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector with http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked — RaphaelDDL, May 09 '13 at 13:00

Maloric · Accepted Answer · 2013-05-09T13:10:00.403

1

Sadly there is no way to select an ancestor in pure CSS, which is what you would require to select an ancestor's sibling.

I have seen people surround other content with a label - while this is a very questionable practice, it would allow you to use the + selector to style the div:

<label>
    <input type="checkbox" />

    <div>
      stuff
    </div>
</label>

Edit:

Or this (thanks to @lnrbob for pointing it out)

<label for="myCheckbox">
    This is my label
</label>

<input id="myCheckbox" type="checkbox" />
<div>
    stuff
</div>

edited May 09 '13 at 13:10

answered May 09 '13 at 12:58

Maloric

4,980
2
25
46

4

alternatively move the input out of the label and associate with the `for` attribute – Stuart Burrows May 09 '13 at 13:01
I thought of that, but I can't add IDs on inputs and for on labels, because some parts of my markup are duplicated and cached (they would have the same ID) :( – thelolcat May 09 '13 at 13:06

score 1 · Answer 2 · answered May 09 '13 at 14:05

1

Try this, im not sure what its cross browser compatibility is.

input:checked + div
{
background: #333;
height: 30px;
width: 30px;
}

This should work, but I wouldnt do it, I would do Javascript.

See my jsfiddle

answered May 09 '13 at 14:05

Cam

1,778
10
22

The input is located inside the `` tags, the adjacent selector will not work here. Unfortunately, CSS does not provide a way to traverse back up the chain, which is what is needed because the label tag and not the input tag is the adjacent sibling to the div element in question. – bbbco May 11 '13 at 05:00
Nowhere in my jsfiddle did I ever put a label (80's style) tag, so this would mean you didnt look at my jsfiddle. – Cam May 13 '13 at 12:55
I looked at your jsfiddle, but that is not how the question indicates his HTML is setup. I was responding about his HTML and not yours. – bbbco May 13 '13 at 15:35
You should know that the purpose of stackoverflow is to provide a working solution. I took the question and made a working solution of what they needed. – Cam May 13 '13 at 15:58
You gave the CSS selector code without indicating that you changed the HTML. You just said, "See my jsfiddle", but no other indication to the other changes you made. This is, IMHO, false advertising, as your answer says, hey this selector will work! But you didn't tell them you had to change their whole HTML DOM to get it to work. Fortunately, the answer above helps to give that info inside the question. – bbbco May 13 '13 at 16:22

score 0 · Answer 3 · answered Nov 15 '20 at 20:46

if any one need extra solution

<input id="myCheckbox" type="checkbox" />
<label for="myCheckbox"> This is my label</label>

<div>
    show when check box is checked
</div>

and the css

#myCheckbox ~ label ~ div { display: none; }
#myCheckbox:checked ~ label ~ div { display: block; }

happy coding !!!

Select next element when input is checked

3 Answers3