:invalid

Resumen

La pseudo-clase :invalid de CSS representa a cualquier elemento <input> o <form> cuyo contenido falla al intentar ser validado según la configuración de tipos del input. Este selector permite que los campos inválidos adopten una apariencia diferente que ayude al usuario a dectectarlos y corregirlos fácilmente.

Por defecto, Gecko no aplica un estilo a la pseudo-clase :invalid. Sin embargo sí que aplica un estilo (un brillo rojo haciendo uso de la propiedad  box-shadow) a la pseudo-clase :-moz-ui-invalid, que corresponde en algunos casos con el subconjunto generado por :invalid 

Se puede deshabilitar este brillo usando el siguiente código CSS, o sobreescribirlo completamente para modificar la apariencia de los campos inválidos:

:invalid {
  box-shadow: none;
}

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

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

Notas

Radio buttons

Si alguno de los elementos de un grupo (elementos que comparten el mismo valor para el atributo name ) es obligatorio (required), la pseudo-clase :invalid se aplica a todos los botones del grupo del grupo si ninguno de ellos ha sido seleccionado.

 

Ejemplo

Este ejemplo presenta un simple formulario cuyos elementos se colorean en verde cuando son válidos, o en rojo cuando no lo son.

Contenido HTML

<form>
  <label>Enter a URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Enter an email address:</label>
  <input type="email" required/>
</form>

Contenido CSS

input:invalid {
  background-color: #ffdddd;
}
  
input:valid {
  background-color: #ddffdd;
}
  
input:required {
  border-color: #800000;
  border-width: 3px;
}

Especificaciones

Especificación Estado Comentario
WHATWG HTML Living Standard Living Standard Sin cambios.
HTML5 Candidate Recommendation Define la semantica asociada al HTML y la validación de restricciones.
Selectors Level 4 Working Draft Sin cambios.
CSS Basic User Interface Module Level 3 Working Draft Define la pseudo-clase, pero no la semantica asociada.

Compatibilidad con los navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (<input>) 10.0 4.0 (2) 10 10.0 5.0
Aplicación sobre <form> ? 13 (13) ? ? ?
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? 4.0 (2) Not supported 10.0 5.0
Aplicación sobre <form> ? 13.0 (13) ? ? ?

Ver también

Etiquetas y colaboradores del documento

Colaboradores de esta página: ccastillos
Última actualización por: ccastillos,