Appliquer des styles aux commandes du formulaire

Dans ce module, vous allez apprendre à styliser les commandes de formulaire et à les assortir aux autres styles de votre site.

Aider les utilisateurs à sélectionner une option

L'élément <select>

Les styles par défaut d'un élément <select> n'ont pas l'air parfaits et leur apparence varie d'un navigateur à l'autre.

Tout d'abord, changeons 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>, procédez comme suit : 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 1rem au minimum (qui, dans la plupart des navigateurs, a une valeur par défaut de 16 px) pour votre élément <select>. Vous éviterez ainsi de zoomer sur les pages dans Safari pour iOS lorsque la commande de formulaire sera sélectionnée.

Bien entendu, vous pouvez également modifier les couleurs des éléments pour qu'elles correspondent aux couleurs de votre marque. Après avoir ajouté d'autres styles d'espacement, :hover et :focus, L'apparence de l'élément <select> est désormais cohérente entre les navigateurs.

Vous pouvez le voir dans la démonstration suivante, Une sélection de styles pour 2019

Qu'en est-il de l'élément <option> ? L'élément <option> est ce que l'on appelle élément remplacé dont la représentation n'entre pas dans le cadre du CSS. À l'heure où nous écrivons ces lignes, vous ne pouvez pas appliquer un style à 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 faire en sorte que les cases à cocher et les cases d'option correspondent à votre marque et s'affichent de la même manière pour tous les navigateurs.

Auparavant, les développeurs ne pouvaient pas styliser les commandes <input type="checkbox"> et <input type="radio"> directement. Désormais, les cases à cocher et les cases d'option peuvent être stylisées à l'aide de leurs pseudo-éléments. Vous pouvez également utiliser la technique de remplacement suivante pour 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 que visuellement masquées. De cette façon, ils seront toujours exposés par le navigateur arborescence d'accessibilité. Notez que vous devrez peut-être appliquer un style supplémentaire pour que les éléments visuellement masqués les commandes de formulaire restent "en haut" de leurs éléments de remplacement. Vous aurez ainsi l'assurance que le pointeur de la souris sur l'un de ces lorsqu'un lecteur d'écran est activé ou que vous utilisez des appareils tactiles avec un lecteur d'écran activé, les commandes masquées visuellement être détectables en explorant au toucher, et l'indicateur de mise au point visible du lecteur d'écran s'affiche généralement à l'emplacement des commandes sont affichées à l'écran.

Différentes options s'offrent à vous pour afficher les cases à cocher et les cases d'option personnalisées. Vous devez utiliser le pseudo-élément CSS ::before et la propriété CSS background, ou utiliser 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 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 Application d'un style à <input type="checkbox"> et <input type="radio"> et des styles de cases à cocher personnalisés.

Utiliser les couleurs de votre site pour les commandes de formulaire

Souhaitez-vous appliquer 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 la modification des styles de commandes de formulaire

Ressources

• Couleur d'accentuation
• Appliquer un style à l'élément <select>
• Accessibilité des commandes de formulaire stylisées
• Ouvrir l'UI