CSS :optional Pseudo Class
Utilisez la pseudo-classe CSS :optional pour sélectionner les éléments facultatifs. Découvrez la pseudo-classe avec des exemples pratiques.
La pseudo-classe :optional correspond à tout contrôle de formulaire que l'utilisateur n'est pas obligé de renseigner. C'est l'exact opposé de :required : un contrôle correspond à l'une ou à l'autre, jamais aux deux.
Un contrôle de formulaire est « facultatif » simplement parce qu'il ne possède pas l'attribut required. Cette page explique à quels éléments :optional s'applique, en quoi elle diffère des pseudo-classes apparentées, et comment l'utiliser pour donner aux utilisateurs un indice visuel sur les champs qu'ils peuvent ignorer sans risque.
À quels éléments :optional correspond-elle ?
Seuls les trois contrôles de formulaire qui acceptent l'attribut required peuvent correspondre à :optional :
<input>(sauftype="hidden",type="range",type="color", les boutons et les types similaires qui ne peuvent jamais être obligatoires)<select><textarea>
Chacun de ces éléments sans attribut required est mis en correspondance par :optional. Les éléments qui ne peuvent jamais être obligatoires — comme <div>, <p> ou un <button> de soumission — ne correspondent jamais à cette pseudo-classe.
:optional vs :required
Ces deux pseudo-classes partitionnent chaque contrôle pouvant être rendu obligatoire :
| Contrôle | Correspond à :required | Correspond à :optional |
|---|---|---|
<input required> | oui | non |
<input> | non | oui |
<select required> | oui | non |
<textarea> | non | oui |
Comme les deux ne se chevauchent jamais, il est courant de laisser les champs facultatifs neutres et de ne mettre en évidence que les champs obligatoires — ou, comme dans l'exemple ci-dessous, d'atténuer les champs facultatifs pour qu'ils s'effacent visuellement.
Syntaxe
:optional {
/* CSS declarations */
}Vous pouvez chaîner :optional avec d'autres sélecteurs et pseudo-classes (par ex. :hover, :focus) et avec des pseudo-éléments (par ex. ::after) pour construire des états plus riches :
input:optional:focus {
outline: 2px solid #1c87c9;
}Exemple
L'exemple ci-dessous stylise les champs de saisie facultatifs avec un aspect atténué et semi-transparent qui s'éclaircit au survol, tandis que les champs obligatoires reçoivent une bordure inférieure en gras afin que la différence soit évidente d'un coup d'œil :
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.example {
margin: 40px auto;
max-width: 400px;
}
label,
button {
display: block;
width: 100%;
margin-bottom: 1.5em;
}
input,
select,
button {
padding: .4em 1em;
}
input,
select {
border: 1px solid #666666;
}
input:optional,
select:optional {
background-color: #eeeeee;
color: #666666;
opacity: 0.5;
transition: .3s;
}
input:optional:hover,
select:optional:hover {
opacity: 1;
}
input:required,
textarea:required {
border-bottom: 3px solid #1c87c9;
}
</style>
</head>
<body>
<h2>:optional selector example</h2>
<div class="example">
<form action="#">
<label>
<input type="text" required />Name *
</label>
<label>
<input type="email" required />Email *
</label>
<label>
<input type="tel" />Phone (optional)
</label>
<label>
<input type="url" />Address (optional)
</label>
</form>
</div>
</body>
</html>Ici, :optional et :required sont utilisées ensemble afin que les deux types de champs soient faciles à distinguer.
Points d'attention
- Les boutons de soumission ne sont pas facultatifs. Un
<button>ou un<input type="submit">ne peut pas être obligatoire, il ne correspond donc jamais à:optional. Stylisez les boutons avec leur propre sélecteur. - Les états de validation sont distincts.
:optionalindique uniquement si un champ est obligatoire — pas si sa valeur est valide. Pour cela, utilisez:validet:invalid. - La mise à jour est en temps réel. Si vous basculez l'attribut
requiredavec JavaScript, le navigateur réévalue immédiatement:optional/:required, de sorte que le style suit instantanément.
Pseudo-classes associées
:required— l'inverse de:optional.:validet:invalid— correspondent aux contrôles selon que leur valeur passe ou non la validation.:enabledet:disabled— correspondent en fonction de l'interactivité.:read-only— correspond aux contrôles que l'utilisateur ne peut pas modifier.