Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

:in-range

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨novembre 2015⁩.

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

Exemple interactif

label {
  display: block;
  margin-top: 1em;
}

input:in-range {
  background-color: palegreen;
}
<form>
  <label for="amount"
    >Combien de billets ? (Vous pouvez acheter 2 à 6 billets)</label
  >
  <input id="amount" name="amount" type="number" min="2" max="6" value="4" />

  <label for="dep">Date de départ : (Toute l'année 2022 est acceptée)</label>
  <input
    id="dep"
    name="dep"
    type="date"
    min="2022-01-01"
    max="2022-12-31"
    value="2025-05-05" />

  <label for="ret">Date de retour : (Toute l'année 2022 est acceptée)</label>
  <input id="ret" name="ret" type="date" min="2022-01-01" max="2022-12-31" />
</form>

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

css
:in-range {
  /* ... */
}

Exemples

HTML

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>

CSS

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

input {
  border: 1px solid black;
}

input:in-range {
  background-color: rgb(0 255 0 / 25%);
}

input:out-of-range {
  background-color: rgb(255 0 0 / 25%);
  border: 2px solid red;
}

input:in-range + label::after {
  content: "valide.";
}

input:out-of-range + label::after {
  content: "hors de portée !";
}

Résultat

Note : Un élément <input> vide n'est pas considéré comme en dehors de la plage et ne sera pas sélectionné à l'aide du sélecteur de pseudo-classe :out-of-range. La pseudo-classe :blank existe pour sélectionner les entrées vides, bien qu'au moment de la rédaction de cet article, elle soit encore expérimentale et peu prise en charge. Vous pouvez également utiliser l'attribut required et la pseudo-classe :invalid pour fournir une logique et un style plus généraux afin de rendre les champs obligatoires (:invalid mettra en forme les champs vides et hors limites).

Spécifications

Specification
HTML
# selector-in-range
Selectors Level 4
# in-range-pseudo

Compatibilité des navigateurs

Voir aussi