Comment styler la sélection de sélection dans CSS
Une liste déroulante est une liste d'options qui n'apparaît que lorsque l'utilisateur clique ou reflète une option et sélectionne une ou plusieurs options dans la liste donnée. Il existe de nombreuses façons de coiffer une liste déroulante en utilisant différentes propriétés CSS, par exemple, la couleur, le survol, la position, la marge et bien d'autres.
Nous sommes ici pour expliquer comment styliser un menu déroulant en utilisant CSS. À cette fin, nous allons d'abord expliquer le processus de création d'un menu déroulant clickable, et après cela, nous allons styliser la liste déroulante de la sélection dans CSS.
Comment créer un menu déroulant dans CSS?
Vous pouvez créer un menu déroulant en HTML en utilisant et des balises. Pour comprendre plus clairement, passons à la syntaxe du menu déroulant.
Syntaxe
Voici la syntaxe du menu déroulant:
Expliquons progressivement les balises HTML utilisées dans le bloc de code ci-dessus:
- étiqueter: Il est utilisé pour spécifier l'option raccourcie sous forme de texte.
- sélectionner: Cet élément permet à l'utilisateur de sélectionner un élément dans une liste.
- option: Il est utilisé pour fournir des options pour le menu déroulant.
Ici, nous présentons un exemple pratique pour expliquer le point.
Exemple
Dans l'exemple donné, nous créerons A et ajouterons un menu déroulant à l'intérieur. Après cela, nous étiqueterons le menu en utilisant le «»Tag et attribuez les valeurs d'option avec le«" étiqueter. Nous avons ajouté les éléments dans la balise pour afficher le menu au centre de l'écran:
Indice de linux
sélectionnez name = "SELECT">
Après avoir exécuté le code fourni, la liste déroulante suivante sera affichée:
Comme vous pouvez le voir, le menu déroulant créé a une apparence simple. Cependant, vous pouvez le coiffer en utilisant différentes propriétés CSS.
Comment styler la sélection de sélection dans CSS?
Dans le CSS, nous allons styliser le menu déroulant de sélection comme suit.
Étape 1: En-tête de style
Modifions la couleur de la tête à l'aide du "couleur" propriété:
H1
la couleur verte;
Ici, nous avons attribué un «vert”Couleur à la tête.
Étape 2: Modifier le type de curseur
Modifiez le type de curseur à l'aide du «le curseur" propriété. En conséquence, lorsque l'utilisateur plane sur la liste des menues, la forme du curseur changera en pointeur manuel:
#sélectionner
curseur: pointeur;
Étape 3: menu déroulant Style
Ici, nous allons définir les attributs du menu déroulant en lui attribuant une couleur d'arrière-plan "lincereen", frontière "1px noir solide", largeur "300px", Et hauteur"30px»:
sélectionner
Contexte: LightEagreen;
Border: 1px noir solide;
Largeur: 300px;
hauteur: 30px;
Après avoir terminé toutes ces étapes, exécutez le fichier HTML et regardez le résultat:
La sortie montre que l'apparence de notre menu déroulant a été stylée.
Conclusion
CSS propose plusieurs propriétés qui peuvent être utilisées pour coiffer les menus déroulants. Par exemple, la bordure, la couleur et les propriétés d'arrière-plan sont utilisées pour styliser la bordure, la couleur et la couleur du menu. Cet article a expliqué la méthode de style dans le menu déroulant et comment y attribuer différents attributs.