La pseudo-classe :out-of-range cible un élément <input> lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs min et max attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

/* Cible n'importe quel élément <input> qui possède un */
/* attribut range et que la valeur associée est en     */
/* dehors de cet intervalle */
input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
}
Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.

Syntaxe

:out-of-range

Exemples

HTML

<form action="" id="form1">
  <ul>Les valeurs entre 1 et 10 sont autorisées.
    <li>
      <input id="valeur1" name="valeur1" type="number" placeholder="1 à 10" min="1" max="10" value="12">
      <label for="valeur1">Votre valeur est </label>
    </li>
  </ul>
</form>

CSS

li {
  list-style: none;
  margin-bottom: 1em;
}

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

input:out-of-range {
  background-color: rgba(255, 0, 0, 0.25);
  border: 2px solid red;
}

input:in-range + label::after {
  content:' OK';
}

input:out-of-range + label::after {
    content:'hors des limites !';
}

Résultat

Spécifications

Spécification État Commentaires
HTML Living Standard
La définition de ':out-of-range' dans cette spécification.
Standard évolutif Définition de la correspondance entre :out-of-range et les éléments HTML.
Selectors Level 4
La définition de ':out-of-range' dans cette spécification.
Version de travail Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidEdge MobileFirefox pour AndroidOpera pour AndroidSafari pour iOSSamsung Internet
Support simpleChrome Support complet 10Edge Support complet OuiFirefox Support complet 29IE Aucun support NonOpera Support complet 11Safari Support complet OuiWebView Android Support complet 2.3Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 16Opera Android Support complet OuiSafari iOS Support complet OuiSamsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, tregagnon
Dernière mise à jour par : SphinxKnight,