Pseudoclase checked

La pseudoclase checked permite seleccionar una casilla de verificación o un botón radio seleccionado.

Desafortunadamente, no se pueden definir estilos para decorarlos. Por ejemplo, no se puede establecer un fondo o un color de borde (se pueden establecer, por ejemplo, el ancho y el alto, pero no tendrán el efecto que se podría esperar).

A pesar de esto, se pueden definir estilos para elementos adyacentes, por ejemplo, así: input:checked + p - definiremos estilos para el párrafo que se encuentra directamente después de un input seleccionado.

Sintaxis

elemento:checked {
	
}

Ejemplo

Marque las casillas de verificación y verá cómo se iluminan de color rojo las etiquetas label que se encuentran directamente después de las casillas de verificación seleccionadas:

<input type="checkbox" id="elem1">
<label for="elem1">etiqueta 1</label>
<br>
<input type="checkbox" id="elem2">
<label for="elem2">etiqueta 2</label>

input:checked + label {
	color: red;
}

Ejemplo

Seleccione los botones radio y verá cómo se iluminan de color rojo las etiquetas label que se encuentran directamente después del botón seleccionado:

<input type="radio" name="elem" id="elem1">
<label for="elem1">etiqueta 1</label>
<br>
<input type="radio" name="elem" id="elem2">
<label for="elem2">etiqueta 2</label>

input:checked + label {
	color: red;
}