Appliquer des styles aux commandes du formulaire

Dans ce module, vous allez apprendre à définir le style des commandes de formulaire et à les adapter à vos autres styles de sites.

Aider les utilisateurs à sélectionner une option

L'élément <select>

Les styles par défaut d'un élément <select> ne sont pas satisfaisants, et l'apparence varie d'un navigateur à l'autre.

Tout d’abord, modifions les flèches. 

select {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url(arrow.png);
    background-repeat: no-repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto;
}

Pour supprimer les flèches par défaut d'un élément <select>, utilisez la propriété CSS appearance. Pour afficher la flèche de votre choix, définissez-la en tant que background.

Vous devez également remplacer font-size par au moins 1rem (pour la plupart des navigateurs, la valeur par défaut est de 16 px) pour votre élément <select>. Cela empêcherait un zoom sur la page dans Safari sous iOS lorsque la commande de formulaire est sélectionnée.

Vous pouvez bien sûr modifier les couleurs des éléments pour qu'elles correspondent à celles de votre marque. Après avoir ajouté d'autres styles pour l'espacement, :hover et :focus, l'apparence de l'élément <select> est désormais cohérente d'un navigateur à l'autre.

Regardez la démonstration suivante de l'édition 2019 de Styliser un choix comme si c'était 2019

Qu'en est-il de l'élément <option> ? L'élément <option> est un élément remplacé dont la représentation n'entre pas dans le cadre du CSS. Au moment de la rédaction de cet article, vous ne pouvez pas styliser l'élément <option>.

Cases à cocher et cases d'option

L'apparence de <input type="checkbox"> et <input type="radio"> varie selon les navigateurs.

Ouvrez la démonstration dans différents navigateurs pour voir la différence. Voyons comment vérifier que les cases à cocher et les cases d'option correspondent à votre marque et s'affichent de la même manière sur plusieurs navigateurs.

Auparavant, les développeurs ne pouvaient pas styliser directement les commandes <input type="checkbox"> et <input type="radio">. Il est désormais possible d'appliquer un style aux cases à cocher et aux cases d'option à l'aide de leurs pseudo-éléments. Vous pouvez également utiliser la technique de remplacement suivante afin de créer des styles personnalisés pour ces éléments.

Tout d'abord, masquez visuellement la case à cocher et la case d'option par défaut.

input[type="radio"],
input[type="checkbox"] {
   position: absolute;
   opacity: 0;
}

Il est important d'utiliser position: absolute en combinaison avec opacity: 0 au lieu de display: none ou visibility: hidden afin que les commandes ne soient masquées que visuellement. Ainsi, elles seront toujours exposées par l'arborescence d'accessibilité du navigateur. Notez qu'un style supplémentaire peut être nécessaire pour s'assurer que les commandes de formulaire visuellement masquées restent positionnées "au-dessus" de leurs éléments de remplacement. Cela permet de s'assurer que lorsque vous pointez sur l'un de ces éléments, lorsqu'un lecteur d'écran est activé ou lorsque vous utilisez des appareils tactiles sur lesquels un lecteur d'écran est activé, les commandes visuellement masquées sont visibles en cas d'exploration tactile, et l'indicateur de mise au point visible du lecteur d'écran s'affiche généralement à l'endroit où les commandes sont affichées à l'écran.

Pour afficher vos cases à cocher et cases d'option personnalisées, vous disposez de différentes options. Utilisez le pseudo-élément CSS ::before et la propriété CSS background, ou utilisez des images SVG intégrées. 

input[type="radio"] + label::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 1px solid black;
  display: inline-block;
  border-radius: 50%;
  margin-inline-end: 0.5em;
}

input[type="radio"]:checked + label::before {
  background: black;
}

Le code CSS offre de nombreuses possibilités pour vous assurer que les cases à cocher et les cases d'option correspondent au style de votre marque.

En savoir plus sur le style de <input type="checkbox"> et de <input type="radio">, ainsi que sur les styles de cases à cocher personnalisés

Comment utiliser les couleurs de votre site pour les commandes de formulaire ?

Vous souhaitez intégrer les styles de votre site aux commandes de formulaire avec une seule ligne de code ? Pour ce faire, vous pouvez utiliser la propriété CSS accent-color.

checkbox {
  accent-color: orange;
}

Testez vos connaissances

Tester vos connaissances sur l'application d'un style aux commandes de formulaire

Comment supprimer le style natif plate-forme des commandes de formulaire ?

Utilisation de revert: all;.
Essayez encore.
Utilisation de appearance: none;.
🎉
Utilisation de appearance: revert;.
Essayez encore.
Utilisation de revert: appearance;.
Essayez encore.

Ressources