How can I apply styles to a label whose checkbox is checked using only CSS?

Question

Let's say I have a basic webpage:

<LABEL ID="THE_LABEL" FOR="THE_CHECKBOX"><INPUT TYPE=checkbox ID="THE_CHECKBOX"/> Blue when checked!</LABEL>

Now let's say that I want the label text to be red when it's unchecked and blue when it's checked. How would I do this? I want something as basic as the following. Here, I use a hypothetical operator "<", which would mean "has the child", but of course it won't work, as there's no such operator:

#THE_LABEL{
  color:red;
}
#THE_LABEL < #THE_CHECKBOX[checked]{
  color:blue;
}

Everything but the theoretical "<" is valid CSS, which makes me wonder if there's a real way to achieve this behavior. Does anyone know of a valid CSS 3 (or lower version) way to style a label based on the state of its checkbox, without using JavaScript?

I do when writing HTML elements, their attributes, and "constants" such as element IDs. I find it helps me more easily distinguish between the elements and the actual content, even when I'm using a public computer and have to use Notepad, or some other such terrible situation. I hope my preferences aren't a bother to you, but they have the same result and help me, personally. Also, if I remember correctly, they were preferred once upon a time ;3 — Ben Leggiero, Aug 21 '12 at 05:09

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

4

You shouldn't be putting the input field within the label.

Since the contents of the label appear after the checkbox, just make your HTML this way:

    <INPUT TYPE=checkbox ID="THE_CHECKBOX"/> 
    <LABEL ID="THE_LABEL" FOR="THE_CHECKBOX">Blue when checked!</LABEL>

And then use this CSS:

#THE_LABEL {
    color: red;
}

#THE_CHECKBOX:checked + #THE_LABEL {
    color: blue;
}

Live demo

The + is a sibling selector. It is not supported by IE8 and below.

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 21 '12 at 05:10

xbonez

39,558
46
154
233

oooh I like it! Though, can this be done with the label encompassing the input, so there's no gap between the label and box? – Ben Leggiero Aug 21 '12 at 05:15
1

@Supuhstar just drop the newline (or any whitespaces) after ``. – kay Aug 21 '12 at 05:16
Thank you! Also, if I understand IE8 behavior right, it should support it if you use in your documents. – Ben Leggiero Aug 21 '12 at 06:29
Noting that, prior to my edit, the checkbox had 2 `ID`s. This is improper in HTML and led to the second being thrown away, which meant the `LABEL`'s `FOR` was also ignored. – Ben Leggiero May 10 '15 at 12:57

score 1 · Answer 2 · edited May 23 '17 at 11:59

1

Sorry, see:

Is there a CSS parent selector? and Complex CSS selector for parent of active child

for more discussion about this topic, but it doesn't seem to be possible.

edited May 23 '17 at 11:59

Community

1
1

answered Aug 21 '12 at 05:08

Ariel

23,798
4
53
68

score 1 · Answer 3 · edited Jun 20 '20 at 09:12

1

I believe this will work in CSS4, but that's really just theoretical for now:

#THE_LABEL{
  color:red;
}
#THE_LABEL /for/ :checked {
  color:blue;
}

^{JSFiddle test}

Browser Support

I come back to this every couple months just to check. Here's the support status for modern versions of the following layout engines:

WebKit: NO (Safari, iOS web views)
- Blink: NO (Chrome, Chromium-based browsers, many open-source projects, Android web views)
Gecko: NO (Firefox, many open-source projects)
Trident: NO (IE, Windows web views, Steam)
- EdgeHTML: NO (Microsoft Edge)

edited Jun 20 '20 at 09:12

Community

1
1

answered May 06 '15 at 11:49

Ben Leggiero

25,904
38
161
267

This is NOT true. CSS3 does it just fine. See the accepted answer here. – Cullub Feb 21 '16 at 21:04
@cullub Please read my full answer. It's just theoretical for now. And of course I saw the accepted answer; I accepted it :P – Ben Leggiero Feb 23 '16 at 02:35

How can I apply styles to a label whose checkbox is checked using only CSS?

3 Answers3

Browser Support