Pseudo-classe checked

A pseudo-classe checked permite selecionar um checkbox ou botão rádio marcado.

Infelizmente, não é possível definir estilos para sua aparência visual diretamente. Por exemplo, não é possível definir um fundo ou cor da borda (é possível definir, por exemplo, largura e altura, mas elas não terão o efeito esperado).

Apesar disso, é possível definir estilos para elementos vizinhos, por exemplo, assim: input:checked + p - definiremos estilos para o parágrafo que está diretamente após o input marcado.

Sintaxe

csselemento:checked {
  
}

Exemplo

Marque os checkboxes e você verá como as labels ficam vermelhas, quando estão diretamente após os checkboxes marcados:

html<input type="checkbox" id="elem1">
<label for="elem1">rótulo 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">rótulo 2</label>

cssinput:checked + label {
  color: red;
}

Результат:

Exemplo

Selecione os botões de rádio e você verá como as labels ficam vermelhas, quando estão diretamente após o botão marcado:

html<input type="radio" name="elem" id="elem1">
<label for="elem1">rótulo 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">rótulo 2</label>

cssinput:checked + label {
  color: red;
}

Результат: