Псевдокласс 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;
}