Pseudo-klassen checked

Pseudo-klassen checked lar deg fange den avmerkede avkrysningsboksen eller radio.

Dessverre kan ikke stiler for deres dekorasjon settes. For eksempel kan man ikke sette bakgrunn eller rammefarge (man kan sette for eksempel bredde og høyde, men de vil ikke ha den effekten man kanskje ville forvente).

Til tross for dette kan man sette stiler for nærliggende elementer, for eksempel slik: input:checked + p - vi setter stiler for avsnittet som beﬁnner seg direkte under det avmerkede inputfeltet.

Syntaks

element:checked {
	
}

Eksempel

Merk av for avkrysningsboksene og du vil se hvordan etikettene label lyser opp i rødt, som beﬁnner seg direkte etter de avmerkede avkrysningsboksene:

<input type="checkbox" id="elem1">
<label for="elem1">etikett 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">etikett 2</label>

input:checked + label {
	color: red;
}

Eksempel

Merk av for radio og du vil se hvordan etikettene label lyser opp i rødt, som beﬁnner seg direkte etter den avmerkede bytteren:

<input type="radio" name="elem" id="elem1">
<label for="elem1">etikett 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">etikett 2</label>

input:checked + label {
	color: red;
}