[forms] CSS selector for a checked radio button's label

Is it possible to apply a css(3) style to a label of a checked radio button?

I have the following markup:

<input type="radio" id="rad" name="radio"/>
<label for="rad">A Label</label>

What I was hoping is that

label:checked { font-weight: bold; }

would do something, but alas it does not (as I expected).

Is there a selector that can achieve this sort of functionality? You may surround with divs etc if that helps, but the best solution would be one that uses the label ''for'' attribute.

It should be noted that I am able to specify browsers for my application, so best of class css3 etc please.

UPDATE:

This only worked for me because our existing generated html was wacky, generating labels along with radios and giving them both checked attribute.

Never mind, and big ups for Brilliand for bringing it up!

If your label is a sibling of a checkbox (which is usually the case), you can use the ~ sibling selector, and a label[for=your_checkbox_id] to address it... or give the label an id if you have multiple labels (like in this example where I use labels for buttons)

Came here looking for the same - but ended up finding my answer in the docs.

a label element with checked attribute can be selected like so:

label[checked] {
  ...
}

I know it's an old question, but maybe it helps someone out there :)

If your input is a child element of the label and you have more than one labels, you can combine @Mike's trick with Flexbox + order.

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }



/* style the switch */

:root {
  --radio-size: 14px;
}

.switchLabel input.switch  {
  width: var(--radio-size);
  height: var(--radio-size);
  border-radius: 50%;
  border: 1px solid #999999;
  box-sizing: border-box;
  outline: none;
  -webkit-appearance: inherit;
  -moz-appearance: inherit;
  appearance: inherit;
  
  box-shadow: calc(var(--radio-size) / 2) 0 0 0 gray, calc(var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 calc(5px + var(--radio-size) / 2) 0 5px;
}

.switchLabel input.switch:checked {
  box-shadow: calc(-1 * var(--radio-size) / 2) 0 0 0 gray, calc(-1 * var(--radio-size) / 4) 0 0 0 gray;
  margin: 0 5px 0 calc(5px + var(--radio-size) / 2);
}

<label class="switchLabel">
  <input type="checkbox" class="switch" />
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

<label class="switchLabel">
  <input type="checkbox" class="switch"/>
  <span class="left">Left</span>
  <span class="right">Right</span>
</label>

label.switchLabel {
  display: flex;
  justify-content: space-between;
  width: 150px;
}
.switchLabel .left   { order: 1; }
.switchLabel .switch { order: 2; }
.switchLabel .right  { order: 3; }

/* sibling selector ~ */
.switchLabel .switch:not(:checked) ~ span.left { color: lightblue }
.switchLabel .switch:checked ~ span.right { color: lightblue }

See it on JSFiddle.

note: Sibling selector only works within the same parent. To work around this, you can make the input hidden at top-level using @Nathan Blair hack.

I know this is an old question, but if you would like to have the <input> be a child of <label> instead of having them separate, here is a pure CSS way that you could accomplish it:

:checked + span { font-weight: bold; }

Then just wrap the text with a <span>:

<label>
   <input type="radio" name="test" />
   <span>Radio number one</span>
</label>

See it on JSFiddle.

I forget where I first saw it mentioned but you can actually embed your labels in a container elsewhere as long as you have the for= attribute set. So, let's check out a sample on SO:

* {_x000D_
  padding: 0;_x000D_
  margin: 0;_x000D_
  background-color: #262626;_x000D_
  color: white;_x000D_
}_x000D_
_x000D_
.radio-button {_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
#filter {_x000D_
  display: flex;_x000D_
  justify-content: center;_x000D_
}_x000D_
_x000D_
.filter-label {_x000D_
  display: inline-block;_x000D_
  border: 4px solid green;_x000D_
  padding: 10px 20px;_x000D_
  font-size: 1.4em;_x000D_
  text-align: center;_x000D_
  cursor: pointer;_x000D_
}_x000D_
_x000D_
main {_x000D_
  clear: left;_x000D_
}_x000D_
_x000D_
.content {_x000D_
  padding: 3% 10%;_x000D_
  display: none;_x000D_
}_x000D_
_x000D_
h1 {_x000D_
  font-size: 2em;_x000D_
}_x000D_
_x000D_
.date {_x000D_
  padding: 5px 30px;_x000D_
  font-style: italic;_x000D_
}_x000D_
_x000D_
.filter-label:hover {_x000D_
  background-color: #505050;_x000D_
}_x000D_
_x000D_
#featured-radio:checked~#filter .featured,_x000D_
#personal-radio:checked~#filter .personal,_x000D_
#tech-radio:checked~#filter .tech {_x000D_
  background-color: green;_x000D_
}_x000D_
_x000D_
#featured-radio:checked~main .featured {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
#personal-radio:checked~main .personal {_x000D_
  display: block;_x000D_
}_x000D_
_x000D_
#tech-radio:checked~main .tech {_x000D_
  display: block;_x000D_
}

<input type="radio" id="featured-radio" class="radio-button" name="content-filter" checked="checked">_x000D_
<input type="radio" id="personal-radio" class="radio-button" name="content-filter" value="Personal">_x000D_
<input type="radio" id="tech-radio" class="radio-button" name="content-filter" value="Tech">_x000D_
_x000D_
<header id="filter">_x000D_
  <label for="featured-radio" class="filter-label featured" id="feature-label">Featured</label>_x000D_
  <label for="personal-radio" class="filter-label personal" id="personal-label">Personal</label>_x000D_
  <label for="tech-radio" class="filter-label tech" id="tech-label">Tech</label>_x000D_
</header>_x000D_
_x000D_
<main>_x000D_
  <article class="content featured tech">_x000D_
    <header>_x000D_
      <h1>Cool Stuff</h1>_x000D_
      <h3 class="date">Today</h3>_x000D_
    </header>_x000D_
_x000D_
    <p>_x000D_
      I'm showing cool stuff in this article!_x000D_
    </p>_x000D_
  </article>_x000D_
_x000D_
  <article class="content personal">_x000D_
    <header>_x000D_
      <h1>Not As Cool</h1>_x000D_
      <h3 class="date">Tuesday</h3>_x000D_
    </header>_x000D_
_x000D_
    <p>_x000D_
      This stuff isn't nearly as cool for some reason :(;_x000D_
    </p>_x000D_
  </article>_x000D_
_x000D_
  <article class="content tech">_x000D_
    <header>_x000D_
      <h1>Cool Tech Article</h1>_x000D_
      <h3 class="date">Last Monday</h3>_x000D_
    </header>_x000D_
_x000D_
    <p>_x000D_
      This article has awesome stuff all over it!_x000D_
    </p>_x000D_
  </article>_x000D_
_x000D_
  <article class="content featured personal">_x000D_
    <header>_x000D_
      <h1>Cool Personal Article</h1>_x000D_
      <h3 class="date">Two Fridays Ago</h3>_x000D_
    </header>_x000D_
_x000D_
    <p>_x000D_
      This article talks about how I got a job at a cool startup because I rock!_x000D_
    </p>_x000D_
  </article>_x000D_
</main>

Whew. That was a lot for a "sample" but I feel it really drives home the effect and point: we can certainly select a label for a checked input control without it being a sibling. The secret lies in keeping the input tags a child to only what they need to be (in this case - only the body element).

Since the label element doesn't actually utilize the :checked pseudo selector, it doesn't matter that the labels are stored in the header. It does have the added benefit that since the header is a sibling element we can use the ~ generic sibling selector to move from the input[type=radio]:checked DOM element to the header container and then use descendant/child selectors to access the labels themselves, allowing the ability to style them when their respective radio boxes/checkboxes are selected.

Not only can we style the labels, but also style other content that may be descendants of a sibling container relative to all of the inputs. And now for the moment you've all been waiting for, the JSFIDDLE! Go there, play with it, make it work for you, find out why it works, break it, do what you do!

Hopefully that all makes sense and fully answers the question and possibly any follow ups that may crop up.

You could use a bit of jQuery:

$('input:radio').click(function(){
    $('label#' + $(this).attr('id')).toggleClass('checkedClass'); // checkedClass is defined in your CSS
});

You'd need to make sure your checked radio buttons have the correct class on page load as well.