:valid

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
WHATWG HTML Living Standard
The definition of ':valid' in that specification.
Living Standard Sin cambios.
HTML5
The definition of ':valid' in that specification.
Recommendation Define la semántica referida a HTML y a las restricciones de validación.
Selectors Level 4
The definition of ':valid' in that specification.
Working Draft Sin cambios.
CSS Basic User Interface Module Level 3
The definition of ':valid' in that specification.
Candidate Recommendation Define la pseudo-clase,pero no la semántica asociada.

Compatibilidad con los distintos navegadores

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) No support 10.0 5.0

Ver además

Etiquetas y colaboradores del documento

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