Dans cette série sur les formulaires Web, nous avons appris à créer et à styliser divers contrôles de formulaire. Dans le dernier volet, nous avons appris à styliser les boutons radio et les cases à cocher en les masquant d’abord à l’aide du bouton apparence Propriété CSS. Nous mettrons encore une fois le apparence propriété à utiliser pour personnaliser l’apparence de la élément. C’est difficile pour plusieurs raisons. Pour commencer, le contrôle est composé de plusieurs sous-composants. De plus, il peut également être affiché sous forme de liste afin d’accepter plusieurs sélections. Enfin, l’apparence de Select devrait changer lorsqu’elle est désactivée. L’article d’aujourd’hui couvrira la norme élément, tandis que le suivant couvrira les multiples ainsi que comment désactiver les contrôles personnalisés.
Avant de poursuivre, cependant, vous voudrez peut-être vous rafraîchir la mémoire en revisitant les articles précédents de cette série :
Anatomie d’un étalon Comme vous pouvez le voir dans l’image ci-dessous, la norme L’élément se compose de plusieurs parties constitutives, y compris un champ de texte en lecture seule qui affiche l’élément actuellement sélectionné, une icône de flèche et une liste déroulante : En termes de balisage, le contient un certain nombre d’options. Ceux-ci constituent les éléments qui apparaissent dans la liste déroulante, lorsque vous cliquez sur la flèche vers le bas, ou sur n’importe quelle partie du champ de texte. Voici le balisage d’un qui permet à l’utilisateur de choisir un single préféré parmi un artiste musical complètement aléatoire : <label for="standard-select">Standard Select</label> <div class="select"> <select id="standard-select"> <option selected disabled>Make a selection</option> <option value="MIaM">Mouse In A Maze</option> <option value="PL">Private Life</option> <option value="SA">Suspended Animation</option> <option value="NQ">No Quarter</option> <option value="11:11">11:11 Ultimate Edition</option> <option value="UV">Ultraviolence</option> <option value="TC">The Core (with outro solo)</option> <option value="TK">Telekinetic Killer</option> <option value="ALL">All of the above</option> <option value="NONE">None of the above</option> </select> <span class="focus"></span> </div> Comment réinitialiser les styles CSS Comme nous l’avons fait avec les boutons radio et les cases à cocher précédemment, nous supprimerons le contrôle natif en utilisant le apparence attribut. Le CSS suivant supprimera également la flèche déroulante : select { // styles reset, including removing the default dropdown arrow appearance: none; -webkit-appearance: none; -moz-appearance: none; background-color: transparent; border: none; padding: 0 1em 0 0; margin: 0; width: 100%; font-family: inherit; font-size: inherit; cursor: inherit; line-height: inherit; // Stack above custom arrow z-index: 1; // Remove focus outline, will add on alternate element outline: none; } Les rembourrage est une propriété abrégée qui définit une valeur pour chacun des quatre côtés, où : le rembourrage supérieur est 0 (notez que les unités ne sont pas requises pour les valeurs zéro) le rembourrage droit est de 1em (le em unit est relative à la taille de police de l’élément, donc 1em signifie la même taille que la police actuelle) le rembourrage inférieur est 0 le rembourrage gauche est 0 Ajout de nos propres styles
Le prochain ensemble de règles personnalise l’apparence de notre en ciblant les
Mais avant d’en arriver là, voici quelque chose dans le CSS que vous n’avez peut-être pas vu auparavant :
:root {
--select-border: #393939;
--select-focus: #101484;
--select-arrow: var(--select-border);
}
Ce sont des variables CSS. Ils sont vraiment utiles pour définir les couleurs que vous aimeriez utiliser à quelques endroits. Les var() méthode lit la valeur de la variable. Tu peux voir le –select-border variable en cours de lecture ci-dessous :
.select {
width: 100%;
min-width: 15ch;
max-width: 30ch;
border: 1px solid var(--select-border);
border-radius: 0.25em;
padding: 0.25em 0.5em;
font-size: 1.25rem;
cursor: pointer;
line-height: 1.1;
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 100%);
}
Les ch est une unité CSS relative à la largeur des caractères du “0” (zéro). Par conséquent, une valeur de 15ch est 15 fois la largeur du caractère “0“.
Voici notre À ce point:
Notez qu’il manque toujours la flèche vers le bas. Ajoutons-le maintenant.