134

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

1

5 Answers 5

180

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>

11
117

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/

1
  • 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. Jul 16, 2019 at 22:54
12

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> 

0

Following is the code to change the label color to green of the checkbox,when it is checked.

input[type=checkbox]:checked +label{
  color: green;
}
<input type="checkbox" id="yes" />
<label for="yes">Yes</label>

input and label are the adjacent sibling tags, selector "+" is used to define the sibling relation between them moreover, ":checked" is a pseudo class in CSS,a CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s),so for us the checked state is considered.

-31

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/

7
  • 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, 2011 at 23:25
  • 2
    The accepted solution uses the adjacent sibling selector which is actually a feature of CSS 2.1. Mar 28, 2011 at 0:05
  • JQuery is the only solution that will ensure cross browser support.
    – Hussein
    Mar 28, 2011 at 0: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. Mar 28, 2011 at 1:43
  • Re: my earlier comment, I did not realise that the :checked pseudo selector is a CSS3 feature. Mar 29, 2011 at 1:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.