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

elemento:checked {
	
}

Exemplo

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

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

input: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:

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

input:checked + label {
	color: red;
}