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

:out-of-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 :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. Ceci permet d'informer l'utilisateur·ice que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

Exemple interactif

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

input:out-of-range {
  background-color: orangered;
}
<form>
  <label for="amount"
    >Combien de billets&nbsp;? (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&nbsp;: (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&nbsp;: (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>

La pseudo-classe :out-of-range est utile pour donner à l'utilisateur·ice une indication visuelle qu'une valeur de champ est en dehors des limites autorisées.

Note : Cette pseudo-classe s'applique seulement aux éléments qui ont (et peuvent avoir) une limitation de plage. En l'absence d'une telle limitation, l'élément ne peut être ni "dans la plage" ni "hors de la plage".

Syntaxe

css
:out-of-range {
  /* ... */
}

Exemples

HTML

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

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

Spécifications

Specification
HTML
# selector-out-of-range
Selectors Level 4
# out-of-range-pseudo

Compatibilité des navigateurs

Voir aussi