Pseudo-clase :checked de CSS3

Definición y uso

CSS :checked Los pseudo-clases se utilizan para coincidir con cualquier elemento seleccionado <input> o <option> elementos.

Esto se aplica a los elementos <input type="radio">, <input type="checkbox"> y <select> con <option>.

Ejemplo

Ejemplo 1

Establecer un delgado contorno rojo para todos los elementos <input> seleccionados:

input:checked {
  outline: 1px sólido rojo;
}

Prueba por ti mismo

Ejemplo 2

Establecer diferentes estilos para los botones de opción, casillas de verificación y opciones cuando están seleccionados:

input[type="radio"]:checked {
  box-shadow: 0 0 5px 3px azul;
}
input[type="checkbox"]:checked {
  box-shadow: 0 0 5px 3px morado;
}
option:checked {
  color: blue;
  background-color: pink;
}

Prueba por ti mismo

Sintaxis CSS

:checked {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente este pseudo-clase.