Le sélecteur out-of-range (pour styliser quand une valeur n'est pas correcte)

Vous avez toujours voulu vérifier dynamiquement les valeurs entrées par vos utilisateurs dans un champ de formulaire sans utiliser JavaScript ? Voici comment modifier le style d'un champ quand un nombre entré par l'utilisateur est invalide !

1ère étape : le HTML

Commençons par créer un champ de formulaire tout à fait classique, qui dispose d'un type number :

<input type="number" min="0" max="100" placeholder="Pourcentage de réduction" />

Nous allons utiliser l'exemple d'un utilisateur qui doit rentrer un pourcentage de réduction pour un produit. Nous n'acceptons pas les pourcentages négatifs (ce serait très étrange n'est-ce pas) et les pourcentages supérieurs à 100 : nous n'allons tout de même pas donner de l'argent à nos acheteurs lorsqu'ils paieront un produit.

2ème étape : le CSS

Commençons par styliser très sommairement notre champ de formulaire :

input {
  width: 300px;
  padding: 15px;
  border-radius: 5px;
  border: 3px solid silver;
  outline: none;
}

Rien de nouveau et tout est plutôt simple à comprendre : notre input fera 300px de largeur avec une bordure de 3px de largeur.

3ème étape : détecter une valeur incorrecte

Il faut juste que nous utilisions out-of-range pour appliquer le style à l'élement input :

input:out-of-range {
  border-color: red;
  background: #ff758f;
}

Et c'est tout ! Essayez d'entrer une valeur qui n'est pas valide.

4ème étape : optimisation

Bon, le problème c'est qu'actuellement tous nos inputs recoivent ce sélecteur et ce n'est pas très efficace... Nous pouvons utiliser out-of-range sur les champs qui contiennent un nombre minimal et un nombre maximal.

Il est donc très facile de préciser que out-of-range doit s'utiliser uniquement sur les inputs avec un attribut type qui vaut number.

input[type="number"]:out-of-range {
  border-color: red;
  background: #ff758f;
}

Nous avons dorénavant un code très simple et très bien pensé qui fonctionne merveilleusement bien pour changer le style de nos champs lorsqu'une valeur n'est pas correcte.