Псевдокласс checked

Псевдокласс checked белгиланган чекбокс ёки radio-ни тутта олади.

Афсуски, уларни безаш учун стилларни белгилаб бўлмайди. Масалан, фон ёки чекка ранги-ни белгилаб бўлмайди (масалан, эни ва бўйини белгилаш мумкин, аммо улар кутган таъсирни кўрсатмайди).

Шунга карамай, қўшни элементлар учун стилларни белгилаш мумкин, масалан, шундай: input:checked + p - белгиланган инпут ostidagi абзац учун стилларни белгилаймиз.

Синтаксис

cssэлемент:checked {
  
}

Мисол

Чекбоксларни белгиланг ва сиз қандай қилиб қизил рангда ёнаёттанини кўрурасiz label меткалари, улар белгиланган чекбокслардан кейин жойлаштан:

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

cssinput:checked + label {
  color: red;
}

Результат:

Мисол

radio-ни белгиланг ва сиз қандай қилиб қизил рангда ёнаёттанини кўрурасiz label меткалари, улар белгиланган ўзгартиргичдан кейин жойлаштан:

html<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>

cssinput:checked + label {
  color: red;
}

Результат: