CODEWITHSUNDEEP
cssinputlabel
twlack
twlack

Reputation: 13

CSS for a checked radio button's labels

I'm using CSS supplied in another post by Behaves Ganging which hides and shows content based on inputs being checked or not.

Here is the CSS

input#show, input#hide {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ label[for="show"]
{
    display: none !important;
}

input#show:checked ~ span#content {
  display:block;
}
input#hide:checked ~ span#content {
    display:none;
}

And the HTML

<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">

<span id="content">Content
    <label for="hide">
        <span>[Hide]</span> 
        <input type=radio id="hide" name="group">
    </label>    
</span>

See a working example here: http://jsfiddle.net/khnNe/466/

BUT, this CSS seems to be being ignored: 

input#show:checked ~ label[for="show"]
{
    display: none !important;
}

I want to hide the Label "Show" when it's input is checked. I've tried several other ways but none worked. ??

If I add CSS

label[for="show"]
{
    display: none !important;
}

[Show] is hidden so it seems the 

input#show:checked ~ label[for="show"]

is the culprit?

Upvotes: 0

Views: 545

Answers (1)

Paulie_D
Paulie_D

Reputation: 114991

The selector is not working because the label is before the input.

The general sibling combinator is made of the "tilde" (U+007E, ~) character that separates two sequences of simple selectors. The elements represented by the two sequences share the same parent in the document tree and the element represented by the first sequence precedes (not necessarily immediately) the element represented by the second one.

You have to reverse the DOM order:

input#show,
input#hide {
  display: none;
}
span#content {
  display: none;
}
input#show:checked ~ label[for="show"] {
  display: none !important;
}
input#show:checked ~ span#content {
  display: block;
}
input#hide:checked ~ span#content {
  display: none;
}
<input type=radio id="show" name="group">
<label for="show">
  <span>[Show]</span>
</label>
<span id="content">Content

<label for="hide">
    <span>[Hide]</span> 
<input type=radio id="hide" name="group">
</label>
</span>

Upvotes: 1

Related Questions