CSS3 selector for group labels of a radio window without a choice (not checked)

I know that you can select a label for marked input elements

<input id="rad1" type="radio" name="rad" value="1">
<label for="rad1">
    <div>Radio 1</div>
</label>

by choosing

input:checked {...}

However, is there any selector to select all the elements of the radio window group label, if there has not yet been a radio group selection? eg

input:noselection { color: red; }

Example: radio has not been selected yet: all elements are black; as soon as one item is selected, this radio will turn green and all others will be gray.

I could add some js as shown below to add a class to the div for wrapping and make a choice on it, however I was wondering if there is any css3 built-in selector for this.

$("fieldset :radio").change(function() {
    $(this).closest("div").addClass("answered"));
});
+4
source share
3 answers

( required), , ( , , ) :invalid - , :

input[name="rad"]:invalid ~ label {...}

, . , , , , , , ​​, , ( , ).

+1

input:not(:checked) + label

EDIT:

@BoltClock, , . , , JS , .

DEMO

CSS:

input + label div{
    color:black;
}

input:checked ~ label div{
    color:grey;    
}

input:checked + label div{
    color:green;    
}
+1

You can use a pseudo selector not.

input:not(:checked){ color: red; }
0
source

Source: https://habr.com/ru/post/1542100/


All Articles