From 149319bb8c7b1394a443f0877c3460cd362aa815 Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:58:15 +0200 Subject: move *.html to *.md --- files/fr/web/css/_colon_out-of-range/index.html | 107 ------------------------ files/fr/web/css/_colon_out-of-range/index.md | 107 ++++++++++++++++++++++++ 2 files changed, 107 insertions(+), 107 deletions(-) delete mode 100644 files/fr/web/css/_colon_out-of-range/index.html create mode 100644 files/fr/web/css/_colon_out-of-range/index.md (limited to 'files/fr/web/css/_colon_out-of-range') diff --git a/files/fr/web/css/_colon_out-of-range/index.html b/files/fr/web/css/_colon_out-of-range/index.html deleted file mode 100644 index 44486cf80d..0000000000 --- a/files/fr/web/css/_colon_out-of-range/index.html +++ /dev/null @@ -1,107 +0,0 @@ ---- -title: ':out-of-range' -slug: Web/CSS/:out-of-range -tags: - - CSS - - Pseudo-classe - - Reference -translation_of: Web/CSS/:out-of-range ---- -
{{CSSRef}}
- -

La pseudo-classe :out-of-range cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

- -
/* Cible n'importe quel élément <input> qui possède un */
-/* attribut range et que la valeur associée est en     */
-/* dehors de cet intervalle */
-input:out-of-range {
-  background-color: rgba(255, 0, 0, 0.25);
-}
- -
-

Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.

-
- -

Syntaxe

- -{{csssyntax}} - -

Exemples

- -

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

- -
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:'hors des limites !';
-}
- -

Résultat

- -

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

- -

Spécifications

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

Compatibilité des navigateurs

- -

{{Compat("css.selectors.out-of-range")}}

- -

Voir aussi

- - diff --git a/files/fr/web/css/_colon_out-of-range/index.md b/files/fr/web/css/_colon_out-of-range/index.md new file mode 100644 index 0000000000..44486cf80d --- /dev/null +++ b/files/fr/web/css/_colon_out-of-range/index.md @@ -0,0 +1,107 @@ +--- +title: ':out-of-range' +slug: Web/CSS/:out-of-range +tags: + - CSS + - Pseudo-classe + - Reference +translation_of: Web/CSS/:out-of-range +--- +
{{CSSRef}}
+ +

La pseudo-classe :out-of-range cible un élément {{HTMLElement("input")}} lorsque la valeur de son attribut value est en dehors de l'intervalle autorisé par les attributs {{htmlattrxref("min", "input")}} et {{htmlattrxref("max","input")}} attributes. Ceci permet d'informer l'utilisateur que la valeur actuellement renseignée dans l'élément est hors des limites acceptables.

+ +
/* Cible n'importe quel élément <input> qui possède un */
+/* attribut range et que la valeur associée est en     */
+/* dehors de cet intervalle */
+input:out-of-range {
+  background-color: rgba(255, 0, 0, 0.25);
+}
+ +
+

Note : Cette pseudo-classe s'applique seulement aux éléments qui ont des valeurs limites.

+
+ +

Syntaxe

+ +{{csssyntax}} + +

Exemples

+ +

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

+ +
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:'hors des limites !';
+}
+ +

Résultat

+ +

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

+ +

Spécifications

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

Compatibilité des navigateurs

+ +

{{Compat("css.selectors.out-of-range")}}

+ +

Voir aussi

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