Псевдоклас checked

Псевдокласът checked позволява да се улови отметнато квадратче или radio бутон.

За съжаление, стилове за тяхното украсяване не могат да бъдат зададени. Например не може да се зададе фон или цвят на границата (може да се задават, например, ширина и височина, но те ще окажат различно влияние, от очакваното).

Въпреки това, може да се зададат стилове за съседни елементи, например, така: input:checked + p - ще зададем стилове за параграф, който се намира непосредствено под отметнат инпут.

Синтаксис

елемент:checked {
	
}

Пример

Отметнете квадратчетата и ще видите как светват в червен цвят етикетите label, които се намират непосредствено след отметнатите квадратчета:

<input type="checkbox" id="elem1">
<label for="elem1">етикет 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">етикет 2</label>

input:checked + label {
	color: red;
}

Пример

Отметнете radio бутоните и ще видите как светват в червен цвят етикетите label, които се намират непосредствено след отметнатия превключвател:

<input type="radio" name="elem" id="elem1">
<label for="elem1">етикет 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">етикет 2</label>

input:checked + label {
	color: red;
}