Pseudo-clase :invalid de CSS

Definición y uso

CSS :invalid El pseudo-clase se utiliza para establecer el estilo de los elementos de formulario inválidos.

Nota:Este pseudo-clase solo se aplica a elementos de formulario con restricciones, como elementos de entrada con atributos min y max, campos de correo electrónico sin correo electrónico válido o campos de número sin valor numérico, etc.

Nota:Si cualquier botón de opción en el grupo de botones de opción es obligatorio, este pseudo-clase se aplicará a todos los botones de opción si en el grupo no se ha seleccionado ningún botón de opción.

Consejo:Usar :valid El pseudo-clase establece el estilo de los elementos de formulario válidos.

Ejemplo

Establecer el estilo de los elementos <fieldset> y <input> inválidos:

fieldset:invalid {
  border: 2px solid red;
  background-color: beige;
}
input:invalid {
  border: 2px solid red;
  background-color: beige;
}

Prueba por ti mismo

Sintaxis CSS

:invalid {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Las cifras en la tabla especifican la versión del navegador que primero admite completamente este pseudo-clase.

Páginas relacionadas

Referencia:Selector :valid de CSS