English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
in-La pseudo-classe range CSS représente un élément input dont la valeur actuelle est comprise dans la gamme définie par les attributs min et max. Note : Cette pseudo-classe ne s'applique qu'aux éléments qui ont (ou peuvent accepter) une gamme de valeurs définie. Si ce type de définition manque, la valeur de l'élément n'a pas de sens pour “in-range” et “out-range”.
Référence complète du manuel des sélecteurs CSS
Définir le style spécifié lorsque la valeur entrée est dans la gamme spécifiée:
<!DOCTYPE html
<html
<head
<meta charset="utf-8">
<title>Manual de base (oldtoolbag.com)</title/><title
<style
input:in-range
{
border:2px solide orange;
}
</><style
</><head
<body
<h3>:in-Exemple de sélecteur range.</h/h3>
<input type="number" min="8" max="18" value="9" />
<p>Entrez une valeur dans l'input (inférieur 8 ou 18), voir les changements de style.</p>
</body>
</html>Voyons voir ‹/›:in-Le sélecteur range est utilisé pour définir le style des étiquettes lorsque leur valeur est dans une gamme spécifiée.
Attention : :in-Le sélecteur range s'applique uniquement aux éléments qui peuvent spécifier une gamme de valeurs, par exemple les attributs min et max des éléments input.
Les nombres dans le tableau indiquent la version du premier navigateur prenant en charge cette propriété.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :in-range | 10.0 | Non pris en charge | 28.0 | 5.2 | 11.0 |
/* Cette pseudo-classe peut sélectionner n'importe quel <input>, mais elle est seulement valide si l'élément spécifie une gamme de valeurs et que la valeur de l'élément est dans cette gamme.*/
input:in-range {
background-color: rgba(0, 255, 0, 0.25);
}Cette pseudo-classe est utilisée pour fournir un indicateur visuel à l'utilisateur, indiquant que la valeur actuelle de l'entrée est dans la gamme autorisée.
Sélecteur CSS :out-de-range