W3docs
fr
Se connecter

CSS : La pseudo-classe :in-range

The :in-range CSS pseudo-class selects elements with a value within the range limits specified by the min and max attributes. Practice with examples.

La pseudo-classe `:in-range` sélectionne tous les éléments dont la valeur se situe dans une plage spécifiée. Elle s'applique aux éléments prenant en charge les attributs de plage. Si cette limitation est absente, l'élément ne peut pas être « dans la plage » ou « hors de la plage ». Pour plus de détails, consultez la pseudo-classe :out-of-range.

La pseudo-classe `:in-range` peut être associée à d'autres pseudo-classes (par exemple, :hover).

info

Le sélecteur `:in-range` ne fonctionne que pour les éléments <input> possédant les attributs min et/ou max, tels que type="number", type="range" ou type="date".

Version

HTML Living Standard

Selectors Level 4

Syntaxe

Exemple de syntaxe CSS :in-range

:in-range {
  css declarations;
}

Exemple de la pseudo-classe `:in-range` :

Exemple de code CSS :in-range

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      input:in-range {
        border: 2px solid #666;
      }
    </style>
  </head>
  <body>
    <h2>:in-range selector example</h2>
    <form>
      <input type="number" min="1" max="10" value="5" />
    </form>
  </body>
</html>
Essayez vous-même »

Practice

Pratique

Quelle est l'utilité de la pseudo-classe :in-range en CSS ?