Comment modifier la couleur de l'option sélectionnée à l'aide de CSS
Des options sont données à l'utilisateur lorsque plusieurs valeurs d'un seul élément existent, à partir de l'endroit où les utilisateurs peuvent sélectionner une option en fonction de leurs préférences. Il existe sous différentes formes, comme une case à cocher, un menu déroulant et un bouton radio. Plus précisément, le menu déroulant fournit des listes d'options prédéfinies qui permettent à l'utilisateur d'en sélectionner un.
Ce manuel expliquera la procédure de modification de la couleur de l'option sélectionnée. Pour cela, d'abord, nous créerons un menu déroulant et le styliserons en utilisant CSS, puis changerons la couleur de l'option sélectionnée.
Commençons!
Comment créer un menu déroulant à l'aide de HTML & CSS?
Dans HTML, vous pouvez créer un menu déroulant en utilisant "","" et "" Mots clés. Pour comprendre plus clairement, passons à la syntaxe du menu déroulant.
Syntaxe
Voici la syntaxe du menu déroulant:
Expliquons les balises HTML utilisées dans la syntaxe ci-dessus:
- : Il est utilisé pour spécifier l'option raccourcie sous forme de texte.
- : Cet élément permet à l'utilisateur de sélectionner un élément dans une liste.
- : Il est utilisé pour fournir des options pour le menu déroulant.
Ici, nous présentons un exemple pratique pour expliquer la syntaxe ci-dessus.
Étape 1: Créez un menu déroulant
Tout d'abord, nous créerons un et ajouterons une rubrique en utilisant le
étiqueter. Pour ajouter un menu déroulant à l'intérieur, nous utiliserons une balise d'étiquette et ajouterons "Choisissez un pays"Comme l'étiquette. Après cela, nous utiliserons la balise pour rendre les options délectables pour l'utilisateur et attribuer les valeurs d'option avec le «" étiqueter.
Html
Linux
Note: Nous avons utilisé "Caché sélectionné" spécifier "-choisis une option-«Comme option par défaut. Mais lorsque l'utilisateur en sélectionne l'un, il sera caché.
Ci-après, nous irons au CSS et le styliserons.
Étape 2: menu déroulant Style à l'aide de CSS
Nous utiliserons "div«Pour accéder au conteneur créé et définir la couleur d'arrière-plan de la div comme«RVB (191, 207, 235)". Nous allons également définir la hauteur de la div, la taille de la police du texte et la couleur du texte comme «150px","gigantesque", et "RVB (2, 0, 0)", respectivement. Ensuite, nous définirons la frontière de la div comme «5px","crête", et "RVB (108, 75, 209)".
CSS
div
Color en arrière-plan: RVB (191, 207, 235);
hauteur: 150px;
taille de police: X-plus;
Couleur: RVB (2, 0, 0);
Border: 5px Ridge RVB (108, 75, 209);
Maintenant, nous allons styliser le menu déroulant et définir la couleur d'arrière-plan du menu comme «RVB (194, 222, 209)"Et la frontière du menu comme"3px","solide", et "RVB (84, 73, 116)". Après cela, nous définirons la largeur, la hauteur et la taille de la police du menu comme «300px","30px" et "grand", respectivement:
sélectionner
Contexte: RVB (194, 222, 209);
Border: 3px RVB solide (84, 73, 116);
Largeur: 300px;
hauteur: 30px;
taille de police: grand;
Comme vous pouvez le voir dans la sortie, le menu déroulant est créé et stylé avec succès en utilisant le HTML et le CSS:
Dans la sortie ci-dessus, on peut voir que le menu déroulant est créé, et il vous permet de sélectionner n'importe quelle option en fonction de vos préférences. Nous passons à la section suivante, où nous modifierons la couleur de l'option sélectionnée à l'aide du CSS.
Comment modifier la couleur de l'option sélectionnée à l'aide de CSS?
Pour modifier la couleur de l'option sélectionnée du menu, le «:vérifié»Le sélecteur de CSS est utilisé. : vérifié est un élément pseudo-classe qui ne peut être lié qu'aux éléments de type d'entrée, tels que «option","cocher", et "radio boutons". Il est principalement utilisé pour modifier le comportement de la valeur sélectionnée de ces éléments.
Syntaxe
La syntaxe de: vérifié est:
element_name: vérifié
Déclarations CSS;
Dans les déclarations CSS, vous pouvez écrire le code pour la valeur sélectionnée de l'option, de la case et de la radio.
Maintenant, passez au menu et modifiez la couleur de l'option sélectionnée à l'aide du sélecteur vérifié. Pour ce faire, nous utiliserons «option«Pour accéder aux options créées dans le menu et«:vérifié”Pseudo-classe à l'option de menu sélectionné. Il permet de modifier le comportement de l'option sélectionnée. Ensuite, nous définirons la couleur de l'option sélectionnée comme «RVB (246, 250, 0)»Et l'arrière-plan de l'option sélectionnée comme«RVB (5, 26, 1)»:
Option: vérifié
Couleur: RVB (246, 250, 0);
Color en arrière-plan: RVB (5, 26, 1);
Comme vous pouvez le voir dans la sortie suivante, l'arrière-plan et la couleur de l'option sélectionnée sont modifiés:
Nous avons expliqué la méthode de modification de la couleur de l'option sélectionnée à l'aide du CSS.
Conclusion
Le ":vérifié»Le sélecteur de pseudo-classe est utilisé pour modifier la couleur de l'option sélectionnée. Le: vérifié est utilisé avec le «option”Du menu déroulant, et après cela, vous pouvez définir la couleur de l'option sélectionnée. Ce manuel a expliqué la méthode de création et de style dans le menu déroulant, puis a démontré la procédure pour modifier la couleur de l'option sélectionnée à l'aide de CSS.