Take the 2-minute tour ×

Every time I hover over the label of a checkbox it turns yellow:


<input type="checkbox" value="hello" id="hello" name="deletefiles[]"/>
<label for="hello">hello</label>


label:hover, label:active {

When I hover over the related checkbox, I want the label to highlight. Is there a way to fire the same hover rule using CSS if I hover over the checkbox as well? Or will I have to use JavaScript for this...?

share|improve this question
add comment

3 Answers

up vote 5 down vote accepted

You can use a CSS sibling selector, like this:

label:hover, label:active, input:hover+label, input:active+label {

Note that this won't work in IE6.

share|improve this answer
Won't it be nice when IE6 market share is small enough we can stop worrying about what doesn't work in it? It's down to 7.2%. See w3schools.com/browsers/browsers_stats.asp –  kbrimington Jul 29 '10 at 4:18
i stoped supporting ie6 5years ago! :) –  matt Jul 29 '10 at 4:31
second-question!!! is it possible to highlight the label IF THE CHECKBOX IS CLICKED/SELECTED? that would be interesting! –  matt Jul 29 '10 at 4:32
@mathiregister: I'm jealous... –  SLaks Jul 29 '10 at 4:32
You mean if it's checked, but not if it's unchecked? You can't do that without Javascript –  SLaks Jul 29 '10 at 4:33
show 3 more comments

Just put the checkbox inside the label:

<label for="hello">

Now when you hover over the checkbox, you'll also be hovering over the label, and your existing rules will suffice to highlight it.

share|improve this answer
this is valid? interesting –  WalterJ89 Jul 29 '10 at 4:10
@WalterJ89: indeed it is... In fact, you can skip the for attribute on the label when the associated input is nested within! –  Shog9 Jul 29 '10 at 4:17
very cool.. Hard to believe I've never seen that or even tried it.. –  WalterJ89 Jul 29 '10 at 4:32
add comment

The jQuery solution:

   $('#hello, label[for="hello"]').hover(function(){$(this).addClass('.hover');},



   background-color: yellow;

And this DOES work in IE6.

share|improve this answer
add comment

Your Answer


