English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
:out-of-La pseudo-classe range CSS représente un élément <input> dont la valeur actuelle est en dehors de la plage 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 plage de valeurs définie. Si ce type de définition manque, la valeur de l'élément n'a pas de sens en termes de 'in'-range et out-range
Manuel complet des sélecteurs CSS
Définir le style lorsque la valeur entrée est en dehors de la plage spécifiée:
<!DOCTYPE html>
><html
><head
<meta charset="utf-8">
<title>Formation de base (oldtoolbag.com)</title>/><title
<style
input:out-of-range
{
border:2px solide bleu;
}
</><style
</><head
<body
<h3> :out-of-Exemple de sélecteur range CSS./h3>
<input type="number" min="8" max="18" value="20" />
<p>Entrez une valeur dans l'input (inférieur 8 ou 18), voir les changements de style.</p>
</body>
</html>Voyons voir ‹/›:out-of-Le sélecteur range est utilisé pour définir le style affiché lorsque la valeur de l'étiquette est en dehors de la plage spécifiée.
Attention : :out-of-Le sélecteur range s'applique uniquement aux éléments qui peuvent spécifier des valeurs en dehors d'une plage, par exemple les attributs min et max d'un élément input.
Les nombres dans le tableau indiquent la version du premier navigateur prenant en charge cette propriété.
| Sélecteur | |||||
|---|---|---|---|---|---|
| :out-of-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 ne fonctionne que si l'élément spécifie une plage de valeurs et que la valeur de l'élément est dans cette plage. */
input:out-of-range {
background-color: rgba(255, 0, 0, 0.25);
}Cette pseudo-classe donne une indication visuelle à l'utilisateur pour indiquer que la valeur actuelle de l'entrée est en dehors de la plage autorisée.
Sélecteur CSS :in-range