MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-survey

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

Resumen

La pseudo-clase :valid CSS representa cualquier elemento de tipo <input><form> que cumpla con los ajustes de validación  especificados para dicho elemento. De esa forma podemos especificar un estilo y apariencia que confirme al usuario que los datos introducidos en el control de formulario son correctos.

Ejemplos

Este ejemplo presenta un formulario que colorea en verde los datos válidos y en rojo los inválidos.

Contenido HTML

<form>
  <label>Introduzca una URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Introduzca una dirección de email:</label>
  <input type="email" required/>
</form>

Contenido 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:valid {
  border-color: #008000;
}

Especificaciones

Specification Status Comment
HTML Living Standard
La definición de ':valid' en esta especificación.
Living Standard Sin cambios.
HTML5
La definición de ':valid' en esta especificación.
Recommendation Define la semántica referida a HTML y a las restricciones de validación.
Selectors Level 4
La definición de ':valid' en esta especificación.
Working Draft Sin cambios.
CSS Basic User Interface Module Level 3
La definición de ':valid' en esta especificación.
Proposed Recommendation Define la pseudo-clase,pero no la semántica asociada.

Compatibilidad con los distintos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico 10.0 4.0 (2) 10 (solo etiquetas input) 10.0 5.0
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico ? 4.0 (2) Sin soporte 10.0 5.0

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: jorgesancheznet
 Última actualización por: jorgesancheznet,