: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

Compatibilidad con los navegadores

Ver también

• :valid
• :-moz-submit-invalid
• :required
• :optional