CSS selector issue with highlighting checkbox

Question

When I put the label after checkbox, this CSS selector works.

    input[type=checkbox]:checked + label {
        color: red;
    }

    <input type="checkbox"><label>Checkbox1</label>

But I'd like to make the checkbox to be checked when the label is clicked on as well.

Here is the CSS for the updated HTML.

        label > input[type=checkbox]:checked {
            color: red;
        }

        <label><input type="checkbox">Checkbox1</label>

What could I be doing wrong here?

Here is the simplified HTML and style in one file.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Selectors Test Ground</title>

    <style>
        label > input[type=checkbox]:checked {
            color: red;
        }
    </style>
</head>
<body>
    <form id="checkBoxForm">
        <ul>
            <li>
                <label><input type="checkbox">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>
</body>

Possible duplicate of [Highlight label if checkbox is checked](http://stackoverflow.com/questions/5275857/highlight-label-if-checkbox-is-checked) — Naruto, Sep 25 '16 at 20:46

score 4 · Accepted Answer · edited Sep 25 '16 at 20:50

4

You must use "for" attribute to set checkbox checked when click on label, it's not a selector, it's HTML attribute and points to an id, see the example below: (i only modified first one).

EDITED: Added css on snippet (and deleted style tags and content copied from the question)

input[type=checkbox]:checked + label {
        color: red;
    }

    <form id="checkBoxForm">
        <ul>
            <li>
                <input id="chk1" type="checkbox"><label for="chk1">Checkbox1</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox2</label>
            </li>
            <li>
                <label><input type="checkbox">Checkbox3</label>
            </li>
        </ul>
    </form>

And you must not set an imput into a label.

edited Sep 25 '16 at 20:50

c-smile

26,734
7
59
86

answered Sep 25 '16 at 20:42

JoelBonetR

1,551
1
15
21

Selector shall be `input[type=checkbox]:checked + label { color: red; }` in order your advice to work. – c-smile Sep 25 '16 at 20:44
the selector is the same as he inserted, but he forgot for on label and tried to get the same result inserting the input into a label, it's only this =) – JoelBonetR Sep 25 '16 at 20:46
What your – c-smile Sep 25 '16 at 20:47
sorry, i just copy-paste all html from the post =D i saw the issue and post fast – JoelBonetR Sep 25 '16 at 20:48

score 0 · Answer 2 · answered Sep 25 '16 at 20:55

0

In your original code, the checkbox and the label are separate, adjacent elements.

<input type="checkbox">
<label>Checkbox Label</label>

However, the label is not associated with the checkbox. A label will be associated with a checkbox if the checkbox is a child element of the label, like in your updated code.

<label>
    <input type=“checkbox”>
    Checkbox Label
</label>

However, this is where you are experiencing an issue. Instead of styling the label next to the checkbox, your CSS is now styling the checkbox inside the label, but not the label itself.

The easiest way to solve the issue would be keeping the elements separate and linking the checkbox to the label with HTML attributes.

<input type="checkbox" id="1">
<label for="1">Checkbox Label</label>

answered Sep 25 '16 at 20:55

Ryan

1,053
12
21

why are you posting the same as me? Oh and... inputs must NEVER be inside a labet tag. – JoelBonetR Sep 25 '16 at 21:31
2

@JoëlBonetRodríguez Incorrect https://www.w3.org/TR/html401/interact/forms.html#edef-LABEL – Ryan Sep 25 '16 at 22:01
Using inputs inside a label is deprecated and cause issues when dealing with stylings and ajax functions, must be outside to run properly. See that in the example you pasted (link) there are many examples with input outside and only one inside, but thats only structure. – JoelBonetR Sep 26 '16 at 07:38
1

@Joël Bonet Rodríguez: That practice has never been deprecated. Just because you don't like one particular way of doing something that's perfectly acceptable in the standard doesn't mean it's "deprecated". – BoltClock Sep 26 '16 at 15:02
i didn't see this weird pratices since 2k9. Keep doing it if you want but sometimes ajax functions blend values and takes it as inherited and you'll be some hours crying how to solve the issue. This are different tags, to structure different items, it's correct to put a p into a p? yes, but you can do it pretty and use span inside a p cuz the properties...huh? Oh and... you'll get default cursor:pointer on checkboxes and radio buttons because label is cursor:default; as default property (according to the documentation, see w3c). – JoelBonetR Sep 26 '16 at 16:17

CSS selector issue with highlighting checkbox

2 Answers2