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
Comment supprimer le style natif de plate-forme des contrôles de formulaire ?
appearance: none;
.appearance: revert;
.revert: all;
.revert: appearance;
.