La pseudo-classe :in-range cible un élément <input> lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs min et max.

/* Cible n'importe quel élément <input>   */
/* qui possède un intervalle et pour le-  */
/* quel la valeur est dans cet intervalle */
input:in-range {
  background-color: rgba(0, 255, 0, 0.25);
}

Cette pseudo-classe s'avère utile lorsqu'on souhaite fournir une indication visuelle quand la valeur est en dehors de la fourchette autorisée.

Note : Cette pseudo-classe ne s'applique qu'aux éléments qui ont des limites de valeurs (autrement dit la valeur doit être comprise dans un intervalle donné). Sans ces limitations, l'élément ne pourra pas être vu comme dans l'intervalle ou en dehors de l'intervalle.

Syntaxe

:in-range

Exemples

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:' non autorisée !';
}

HTML

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

Résultat

Spécifications

Spécification Etat Commentaires
HTML Living Standard
La définition de ':in-range' dans cette spécification.
Standard évolutif Définition de la correspondance entre :in-range et les éléments HTML.
Selectors Level 4
La définition de ':in-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 10
Notes
Support complet 10
Notes
Notes Before Chrome 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Chrome 52, it was changed to only match enabled read-write inputs.
Edge Support complet OuiFirefox Support complet 29
Notes
Support complet 29
Notes
Notes Before Firefox 50, :in-range matched disabled and read-only inputs (see bug 1264157). In Firefox 50, it was changed to only match enabled read-write inputs.
IE Aucun support NonOpera Support complet 11
Notes
Support complet 11
Notes
Notes Before Opera 39, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.
Safari Support complet Oui
Notes
Support complet Oui
Notes
Notes In Safari, :in-range matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.
WebView Android Support complet 2.3
Notes
Support complet 2.3
Notes
Notes Before version 52, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In version 52, it was changed to only match enabled read-write inputs.
Chrome Android ? Edge Mobile Support complet OuiFirefox Android Support complet 16Opera Android Support complet Oui
Notes
Support complet Oui
Notes
Notes Before Opera 39, :in-range matched disabled and read-only inputs (see Chromium bug 602568). In Opera 39, it was changed to only match enabled read-write inputs.
Safari iOS Support complet Oui
Notes
Support complet Oui
Notes
Notes In Safari, :in-range matched disabled and read-only inputs (see bug 156530). It was later changed to only match enabled read-write inputs.
Samsung Internet Android ?

Légende

Support complet  
Support complet
Aucun support  
Aucun support
Compatibilité inconnue  
Compatibilité inconnue
Voir les notes d'implémentation.
Voir les notes d'implémentation.

Voir aussi

Étiquettes et contributeurs liés au document

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