La pseudo-clase :invalid de CSS representa cualquier elemento <input> u otro elemento <form> cuyos contenidos no se puedan validar.

/* Selecciona cualquier <input> no válido */
input:invalid {
  background-color: pink;
}

Esta pseudo-clase es útil para resaltar errores de campo para el usuario.

Sintaxis

:invalid

Ejemplo

Este ejemplo presenta una forma simple que colorea los elementos en verde cuando son validos y en rojo cuando no lo son.

HTML

<form>
  <label for="url_input">Ingresa una URL:</label>
  <input type="url" id="url_input" />
  <br />
  <br />
  <label for="email_input">Introduzca una dirección de correo electrónico:</label>
  <input type="email" id="email_input" required/>
</form>

CSS

input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

input:required:invalid {
  border-color: #C00000;
}

Resultado

Problemas de accesibilidad

El color rojo se usa comúnmente para indicar una entrada no válida. Las personas que tienen ciertos tipos de daltonismo no podrán determinar el estado de la entrada a menos que vaya acompañado de un indicador adicional que no dependa del color para transmitir el significado. Normalmente, se utilizan texto descriptivo y / o un icono.

Notas

Radio buttons

Si alguno de los radio buttons en un grupo es required, la pseudo-clase :invalid se aplica a todos ellos si no se selecciona ninguno de los botones del grupo. (Los radio buttons agrupados comparten el mismo valor para su atributo name).

Gecko por defecto

Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo, sí aplica un estilo (un "resplandor" rojo que usa la propiedad box-shadow) a la pseudoclase :-moz-ui-invalid, que se aplica en un subconjunto de casos para: :invalid.

Puede inhabilitar el brillo con el siguiente CSS o anularlo por completo para modificar la apariencia de los campos no válidos:

:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}

Especificaciones

Especificación Estado Comentarios
HTML Living Standard
La definición de ':invalid' en esta especificación.
Living Standard Ningún cambio.
HTML5
La definición de ':invalid' en esta especificación.
Recommendation Define la semántica de HTML y la validación de restricciones.
Selectors Level 4
La definición de ':invalid' en esta especificación.
Working Draft Definición Inicial.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Soporte básicoChrome Soporte completo 10Edge Soporte completo 12Firefox Soporte completo 4IE Soporte completo 10Opera Soporte completo 10Safari Soporte completo 5WebView Android ? Chrome Android ? Edge Mobile Soporte completo SiFirefox Android Soporte completo 4Opera Android Soporte completo 10Safari iOS Soporte completo 5Samsung Internet Android ?
Applies to <form> elementsChrome Soporte completo SiEdge Sin soporte NoFirefox Soporte completo 13IE Sin soporte NoOpera Soporte completo SiSafari ? WebView Android ? Chrome Android ? Edge Mobile Sin soporte NoFirefox Android Soporte completo 14Opera Android ? Safari iOS ? Samsung Internet Android ?

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Compatibility unknown  
Compatibility unknown

Ver también

Etiquetas y colaboradores del documento

Colaboradores en esta página: lajaso, teoli, ccastillos
Última actualización por: lajaso,