:valid

This translation is incomplete. Please help translate this article from English.

Sumari

La pseudo-classe CSS :valid representa qualsevol element <input> o <form> en que la validació correcte del seu contingut està d'acord amb la configuració del tipus d'entrada. Això permet fer fàcilment camps vàlids que adoptin una aparença que ajudi a l'usuari a confirmar que les seves dades tenen un format correcte.

Sintaxi

:valid { style properties }

Exemples

En aquest exemple es presenta un formulari senzill en que els elements tenen el color verd quan es validen i vermell quan no.

Contingut HTML

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

Contingut 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;
}

Especificacions

Especificació Estat Comentari
WHATWG HTML Living Standard
The definition of ':valid' in that specification.
Living Standard Sense canvis.
HTML5
The definition of ':valid' in that specification.
Recommendation Defineix la semàntica pel que fa a la validació d'HTML i restriccions.
Selectors Level 4
The definition of ':valid' in that specification.
Working Draft Sense canvis.
CSS Basic User Interface Module Level 3
The definition of ':valid' in that specification.
Candidate Recommendation Defineix la pseudo-classe, però no la semàntica associada.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 10.0 4.0 (2) 10 (only input tags) 10.0 5.0
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic ? 4.0 (2) No support 10.0 5.0

Veure

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,