From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/fr/web/css/_colon_in-range/index.html | 106 ++++++++++++++++++++++++++++ 1 file changed, 106 insertions(+) create mode 100644 files/fr/web/css/_colon_in-range/index.html (limited to 'files/fr/web/css/_colon_in-range') diff --git a/files/fr/web/css/_colon_in-range/index.html b/files/fr/web/css/_colon_in-range/index.html new file mode 100644 index 0000000000..3e5e8ff1b4 --- /dev/null +++ b/files/fr/web/css/_colon_in-range/index.html @@ -0,0 +1,106 @@ +--- +title: ':in-range' +slug: 'Web/CSS/:in-range' +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: 'Web/CSS/:in-range' +--- +
{{CSSRef}}
+ +

La pseudo-classe :in-range cible un élément {{htmlelement("input")}} lorsque sa valeur courante est comprise dans l'intervalle défini par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}}.

+ +
/* Cible n'importe quel élément <input>   */
+/* qui possède un intervalle et pour le-  */
+/* quel la valeur est dans cet intervalle */
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+ +

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

+ +
{{csssyntax}}
+ +

Exemples

+ +

CSS

+ +
li {
+  list-style: none;
+  margin-bottom: 1em;
+}
+input {
+  border: 1px solid black;
+}
+input:in-range {
+  background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+  border: 2px solid red;
+}
+input:in-range + label::after {
+  content:' OK';
+}
+input:out-of-range + label::after {
+  content:' non autorisée !';
+}
+ +
+

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>
+ +

Résultat

+
+ +
{{EmbedLiveSample('Exemples',600,140)}}
+ +

Spécifications

+ + + + + + + + + + + + + + + + + + + + + +
SpécificationEtatCommentaires
{{SpecName('HTML WHATWG', 'scripting.html#selector-in-range', ':in-range')}}{{Spec2('HTML WHATWG')}}Définition de la correspondance entre :in-range et les éléments HTML.
{{SpecName('CSS4 Selectors', '#in-range-pseudo', ':in-range')}}{{Spec2('CSS4 Selectors')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ + + +

{{Compat("css.selectors.in-range")}}

+ +

Voir aussi

+ + -- cgit v1.2.3-54-g00ecf