Selecteur out-of-range Écran CSS

Table of Contents

Rôle

Le sélecteur "out-of-range" est une pseudo-classe identifiable par la syntaxe ":out-of-range". Son rôle est de cibler spécifiquement chaque élément de formulaire qui est associé à une plage de valeurs définie par les attributs "min" et "max", et dont la valeur se situe en dehors de cette plage prédéfinie.

Il convient de noter que pour instaurer une plage de valeurs sur un élément de formulaire, il est nécessaire d’utiliser les attributs HTML "min" et "max". Cette fonctionnalité s’applique notamment aux balises "input" de types variés tels que "number", "range", "date", "datetime", "datetime-local", "month", "time" et "week". Toutefois, il est essentiel de prendre en compte que cette fonctionnalité n’est prise en charge qu’à partir de la version IE-10 d’Internet Explorer et n’est pas compatible avec le navigateur Opera.

L’utilisation du sélecteur "out-of-range" revêt une importance significative dans le domaine du développement web, car elle permet d’appliquer des styles spécifiques aux éléments de formulaire dont la valeur fournie par l’utilisateur se trouve en dehors de la plage définie. Cette pseudo-classe offre une méthode efficace pour signaler visuellement aux utilisateurs que la valeur qu’ils ont saisie ne correspond pas aux attentes, tout en maintenant une expérience utilisateur cohérente et informative.

L’une des façons de mettre en œuvre cette fonctionnalité est d’utiliser du code HTML et CSS. Voici un exemple pratique illustrant la création d’un formulaire avec un champ "input" de type "number" et l’application du sélecteur "out-of-range" pour styliser les valeurs en dehors de la plage acceptable :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input[type="number"]:out-of-range {
border-color: red;
background-color: #ffcccc;
}
</style>
<title>Exemple de Sélecteur :out-of-range</title>
</head>
<body>
<h2>Exemple de Sélecteur :out-of-range</h2>
<form>
<label for="age">Âge :</label>
<input type="number" id="age" name="age" min="18" max="65">
<input type="submit" value="Envoyer">
</form>
</body>
</html>

Dans cet exemple, le champ "input" de type "number" est destiné à recueillir l’âge d’un utilisateur. Les attributs "min" et "max" définissent la plage de valeurs acceptables, c’est-à-dire que l’utilisateur ne peut entrer qu’un âge compris entre 18 et 65 ans. Lorsque l’utilisateur saisit une valeur en dehors de cette plage, le sélecteur "out-of-range" est activé, et les styles CSS associés sont appliqués. Dans ce cas, le champ texte deviendra bordé de rouge et aura un fond rose pâle pour indiquer visuellement l’erreur.

Il est primordial de souligner que l’exemple donné est simplifié à des fins d’illustration. Dans un projet réel, le code CSS peut être personnalisé pour s’adapter au design et au style de la page web. De plus, l’utilisation du sélecteur "out-of-range" peut être combinée avec d’autres pseudo-classes, propriétés CSS et méthodes de validation pour offrir une expérience utilisateur plus riche et fluide.

En somme, le sélecteur "out-of-range" représente un outil puissant dans l’arsenal des développeurs web pour garantir la saisie de données correctes et pertinentes dans les formulaires en ligne. Grâce à cette pseudo-classe, il est possible de fournir des retours visuels immédiats aux utilisateurs concernant les erreurs de saisie, contribuant ainsi à améliorer la qualité de l’interaction utilisateur sur les sites web.

<input type="number" min="18" max="99">

Dans l’exemple ci-dessous, le champ apparaît avec un fond jaune si vous tapez manuellement une valeur au dessus de 10 ou un dessous de 5.

input:out-of-range{
  background-color: yellow;
}
Nombre : <input type="number" min="5" max="10">

Testez vous-même ce sélecteur

Version : CSS3

Compatibilité

Internet Explorer ne prend pas en charge les sélecteurs hors plage !

Maxime GUINARD
Maxime GUINARD

Merci d'avoir lu cet article. Je suis un développeur web WordPress passionné, et j'ai créé ce contenu avec soin pour vous offrir des informations de qualité. Restez connectés pour plus de conseils et d'astuces !

Facebook
Twitter
LinkedIn

Un projet en tête ?