Greetings.
In the example, I used input type = "radio" to select “show” “close” some block. How do I make the active radio change the background, i.e. lightgreen changed to green , with red it turned out (the colors are true, but it’s not scary), because it is the next element, and green turns out like the previous element, so this is how do you want the previous element to change the background when : checked ? Thank you!
body {z-index: 10; positioin: relative; text-align: center;}
input {display: none;} / * radio buttons * /
label [for = "radio-1"] {background: lightgreen;}
label [for = "radio-2"] {background: pink;}
label {
cursor: pointer;
border: 1px solid # 333;
padding: 5px;
margin-top: 20px;
display: inline-block;
}
label: hover {opacity: 0.6;}
label: active {background: rgba (0,0,0,0.2);}
.block {
width: 600px;
position: absolute;
top: 80px;
left: 28%;
}
# radio-1: checked ~ .block {display: block;} .block {display: none;}
# radio-1: checked ~ label {background: red;} & lt; label class = "green" for = "radio-1" & gt; OPEN & lt; sup & gt; (chckd) & lt; / sup & gt; & lt; / label & gt;
& lt; input type = "radio" name = "radio" id = "radio-1" checked = "checked" & gt;
& lt; label class = "red" for = "radio-2" & gt; CLOSE & lt; / label & gt;
& lt; input type = "radio" name = "radio" id = "radio-2" & gt;
& lt;! - - & gt;
& lt;! - - & gt;
& lt; div class = "block" & gt;
& lt; fieldset & gt;
& lt; legend & gt; HEADER & lt; / legend & gt;
& lt; h1 & gt; TEXT-HEADER # 1
& lt; strong & gt; ... some text & lt; / strong & gt; & lt; / h1 & gt;
& lt; / fieldset & gt;
& lt; / div & gt; Answer 1, authority 100%
input {display: none;} / * radio buttons * /
The inputs themselves are hidden anyway, so you can put them anywhere in the markup. We need to put them before and, possibly, above the elements that they should influence, and then use selectors of the following types:
# chk-i: checked ~ .smth-i
# chk-i: checked ~ .root .smth-i
In your case, it turns out like this:
input {
display: none;
}
label {
cursor: pointer;
border: 1px solid # 333;
padding: 5px;
margin-top: 20px;
display: inline-block;
}
label: hover {
opacity: 0.6;
}
# radio-1: checked ~ label [for = "radio-1"] {background: green; }
# radio-2: checked ~ label [for = "radio-2"] {background: red; } & lt; input type = "radio" name = "radio" id = "radio-1 "checked =" checked "& gt;
& lt; input type = "radio" name = "radio" id = "radio-2" & gt;
& lt; label class = "green" for = "radio-1" & gt; OPEN & lt; sup & gt; (chckd) & lt; / sup & gt; & lt; / label & gt;
& lt; label class = "red" for = "radio-2" & gt; CLOSE & lt; / label & gt; Answer 2
, for example, in this case, the condition will not work while the input is outside the label block
* yes, if you use such a condition
radio-1: checked ~ * label {background: red;} – works
input {margin-bottom: 20px;}
label {
border: 1px solid orange;
padding: 10px;
}
# radio-1: checked ~ label {background: red;} & lt; input type = "radio" name = "radio" id = "radio-1 "& gt;
& lt; input type = "radio" name = "radio" id = "radio-2" & gt;
& lt; div & gt;
& lt; label for = "radio-1" & gt; radio-1 & lt; / label & gt;
& lt; label for = "radio-2" & gt; radio-2 & lt; / label & gt;
& lt; / div & gt;