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

Псевдокласси checked имкон медиҳад, ки чекбокси интихобшуда ё радио-ро қабз кунем.

Мутаассифона, услубҳо барои оро додани онҳо муайян кардан мумкин нест. Масалан, мумкин нест замина ё ранги ҳудуд-ро муайян кард (мумкин аст, масалан, паҳнӣ ва баландиро муайян кард, аммо онҳо таъсири мунтазирро намерасонанд).

Бо вуҷуди ин, имконпазир аст, ки услубҳоро барои элементҳои ҳамсоя муайян кард, масалан, ин тавр: input:checked + p - барои абзасе, ки бевосита дар зери вуруди интихобшуда ҷойгир аст, услубҳоро муайян мекунем.

Синтаксис

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

Намуна

Чекбоксҳоро интихоб кунед ва шумо хоҳед дид, ки чӣ тавр ба сурхи ранҷида меоянд нишонаҳои 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;
}

Результат:

Намуна

Радио-ро интихоб кунед ва шумо хоҳед дид, ки чӣ тавр ба сурхи ранҷида меоянд нишонаҳои 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;
}

Результат: