:valid

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

Navegadors compatibles

Veure

• :invalid, :required, :optional