131

Is there a non-javascript way of changing the color of a label when the corresponding checkbox is checked?

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
Vladimir Keleshev
  • 13,753
  • 17
  • 64
  • 93
  • 2
    Possible duplicate of [CSS selector for a checked radio button's label](http://stackoverflow.com/questions/1431726/css-selector-for-a-checked-radio-buttons-label) – Denilson Sá Maia Jan 18 '16 at 16:24

4 Answers4

177

Use the adjacent sibling combinator:

.check-with-label:checked + .label-for-check {
  font-weight: bold;
}
<div>
  <input type="checkbox" class="check-with-label" id="idinput" />
  <label class="label-for-check" for="idinput">My Label</label>
</div>
Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
  • 3
    This will not work in IE 6-8, unless OP do not care about IE. – Hussein Mar 28 '11 at 00:51
  • 27
    I know, I noted that it would only work in modern browsers in my answer. – Andrew Marshall Mar 28 '11 at 02:03
  • 4
    @inf3rno It should. Both the [adjacent sibling selector](https://developer.mozilla.org/en/CSS/Adjacent_sibling_selectors) and [`:checked` selector](https://developer.mozilla.org/En/CSS/:checked) are listed as supported in IE9. [Microsoft's own docs](http://msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx) confirm this. – Andrew Marshall Mar 20 '12 at 15:31
  • 5
    good solution, but if the label element ist not the next ancestor you should try using the ~ selector instead of the + selector http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/ (last in table) – Karl Adler Jan 24 '13 at 15:47
  • @abimelex Though depending on your HTML that may end up matching many more ` – Andrew Marshall Jan 24 '13 at 17:27
  • This didn't work for me because my label tag was not next to my input tag. Moving them in the code to be next to each other fixed it. Thank you! – Markie Apr 30 '14 at 10:19
  • 1
    The label is missing the 'for' attribute so the elements are not related. The CSS trick will work but the checkbox won't be triggered by clicking on the label. After that is fixed you only need [type=checkbox] + label {/* styles */} – guioconnor Aug 10 '14 at 10:05
  • 2
    This only works when ` – Darren Cook Nov 11 '15 at 10:44
  • @DarrenCook Nope, because there’s no way in CSS for a parent to change based on a child (except via certain implicit changes like size). – Andrew Marshall Nov 12 '15 at 00:15
  • Assuming the label and checkbox are adjacent like this, though. – Super Cat Feb 17 '17 at 03:31
  • This is beautiful. One day CSS will become the reason of D3's demise. – Qumber Dec 31 '20 at 09:33
116

I like Andrew's suggestion, and in fact the CSS rule only needs to be:

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

I like to rely on implicit association of the label and the input element, so I'd do something like this:

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

with CSS:

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

Example: http://jsfiddle.net/wrumsby/vyP7c/

Andrew Marshall
  • 95,083
  • 20
  • 220
  • 214
Walter Rumsby
  • 7,435
  • 5
  • 41
  • 36
  • There's a trick for changing the background color of the *parent label* of a checked checkbox. Make the label overflow: hidden, then give the checkbox a very large dropshadow... `:checked { box-shadow: 0 0 0 500px orange; }`. You'll need to play with z-indexes to ensure any sibling elements aren't hidden. – Aaron Cicali Jul 16 '19 at 22:54
11

This is an example of using the :checked pseudo-class to make forms more accessible. The :checked pseudo-class can be used with hidden inputs and their visible labels to build interactive widgets, such as image galleries. I created the snipped for the people that wanna test.

input[type=checkbox] + label {
  color: #ccc;
  font-style: italic;
} 
input[type=checkbox]:checked + label {
  color: #0964aa;
  font-style: normal;
} 
<input type="checkbox" id="cb_name" name="cb_name"> 
<label for="cb_name">CSS is Awesome</label>
Teocci
  • 7,189
  • 1
  • 50
  • 48
-30

You can't do this with CSS alone. Using jQuery you can do

HTML

<label id="lab">Checkbox</label>
<input id="check" type="checkbox" />

CSS

.highlight{
    background:yellow;
}

jQuery

$('#check').click(function(){
    $('#lab').toggleClass('highlight')
})

This will work in all browsers

Check working example at http://jsfiddle.net/LgADZ/

Hussein
  • 42,480
  • 25
  • 113
  • 143
  • 9
    The question did say a non javascript way and the answer before you cleary showed a way that works using only css – Kevin Mar 27 '11 at 23:25
  • 2
    The accepted solution uses the [adjacent sibling selector](http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors) which is actually a feature of [CSS 2.1](http://www.w3.org/TR/CSS21/). – Walter Rumsby Mar 28 '11 at 00:05
  • JQuery is the only solution that will ensure cross browser support. – Hussein Mar 28 '11 at 00:51
  • 7
    Please be careful there Hussein. You can provide support for browsers like Internet Explorer 6 that don't support the adjacent sibling selector using **JavaScript**. **jQuery** is a JavaScript library that will help you do this; there are other libraries (or even pure JavaScript!) that you can do this with. – Simon Lieschke Mar 28 '11 at 01:43
  • Re: my earlier comment, I did not realise that the [`:checked` pseudo selector](http://www.w3.org/TR/css3-selectors/#checked) is a CSS3 feature. – Walter Rumsby Mar 29 '11 at 01:39
  • Though its not the exact answer asked by the @WalterRumsby but its the recommended answer, as events, clicks are not supposed to be handled by css, its just experimental feature you could do with css. So better to avoid such approach in almost all cases. – Syed Mar 19 '14 at 08:00
  • While this is considered a workaround, I think that it should be removed from this discussion. – Tanasos Nov 15 '16 at 13:55