Styliser le Standard Select avec CSS et HTML

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

qui renferme le élément:

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.

Création de la flèche personnalisée en CSS Pour rendre la flèche déroulante, nous utiliserons une propriété CSS moderne appelée chemin du clip. Les chemins de détourage nous permettent de créer toutes sortes de formes en « coupant » les formes autrement carrées et rectangulaires que nous obtenons par défaut pour la plupart des éléments. Avant le chemin du clip attribut, SVG aurait été la solution idéale. Cependant, cela ne fonctionne pas bien comme arrière-plan car nous ne pouvons en aucun cas modifier son apparence sans redéfinir entièrement le SVG. Il ne prendrait pas non plus en charge l’utilisation de variables personnalisées CSS. Nous allons définir la flèche comme un :après pseudo-élément du .sélectionner : .select { //custom select rules... //Custom arrow &::after { content: ""; justify-self: end; width: 0.8em; height: 0.5em; background-color: var(--select-arrow); clip-path: polygon(100% 0%, 0 0%, 50% 100%); } } Vous vous demandez peut-être ce que &::après Est-ce que. Cela fait partie de Sass (Syntactically Awesome StyleSheets), qui est une extension CSS qui se compile en CSS direct. Cela rend CSS plus facile à coder et élimine beaucoup de duplications. Il le fait – au moins partiellement – par nidification. Le caractère esperluette fait référence au sélecteur parent lors de l’imbrication. Positionnement de la flèche Afin d’accueillir les :aprèslargeur de , nous devons mettre à jour le .sélectionner règle pour utiliser une disposition de grille CSS. Ensuite, pour positionner la flèche, nous allons définir un grille-template-zones appelé “sélectionner” et ajoutez une règle qui l’affecte au élément et ::après teneur. Les grille-template-zones La propriété spécifie les zones dans la disposition de la grille. Vous pouvez nommer les éléments de la grille en utilisant le zone de grille propriété, puis référencer le nom défini par le propriété grid-template-areas: .select { display: grid; grid-template-areas: "select"; align-items: center; position: relative; select, &::after { grid-area: select; } min-width: 15ch; max-width: 30ch; //etc... } Nous pouvons maintenant dire au .sélectionner à aligner-éléments au centre (voir l’extrait ci-dessus), tout en alignant le ::après contenu à la « fin » via le se justifier attribut: //Custom arrow &::after { content: ""; justify-self: end; //etc... } Voici enfin le résultat final : Vous trouverez la démo de ce tutoriel sur codepen.io. Conclusion Dans cette partie de la série Créer un formulaire Web avec HTML, nous avons utilisé plusieurs nouvelles propriétés CSS, notamment apparence et grille-template-zones afin de personnaliser l’apparence d’un élément standard. Le prochain article couvrira les multiples ainsi que la façon de désactiver les contrôles personnalisés. La finale de la série changera de vitesse pour expliquer le rôle de JavaScript pour rendre les formulaires HTML plus interactifs. — to www.htmlgoodies.com