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 — Ky -, 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

Ayush

41,754
51
164
239

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? – Ky - Aug 21 '12 at 05:15
1

@Supuhstar just drop the newline (or any whitespaces) after ``. – Kijewski 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. – Ky - 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. – Ky - 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

25,995
5
59
69

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

Ky -

30,724
51
192
308

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 – Ky - Feb 23 '16 at 02:35

score 1 · Answer 4 · answered Sep 22 '22 at 19:15

The CSS has selector is slowly being implemented across browsers.

Currently, according to caniuse.com, it has 56.19% support globally.

Using this selector you can achieve what your original question asked for: styling a label based on the checked state of a nested checkbox.

The codepen showing the example is here and the html used in the example is below. Note, this will work in Chromium browsers but not in Firefox at the moment (see the canIUse page referenced above for more on supported browsers).

<style>
    label {
        color: red;
    }

    label:has(> input[type='checkbox']:checked) {
        color: blue;
    }
</style>

<label>
    Me blue when checked.
    <input type="checkbox">
</label>

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

4 Answers4

Browser Support