Styliser un menu déroulant en CSS

1. Utilisez appearance:none pour masquer la flèche par défaut et définir une flèche personnalisée dans la liste déroulante de sélection dans CSS
2. Utilisez overflow:hidden pour masquer la flèche par défaut et définir une flèche personnalisée dans la liste déroulante de sélection dans CSS

Dans cet article, nous allons présenter quelques méthodes pour styliser le menu déroulant de sélection en CSS.

Utilisez appearance:none pour masquer la flèche par défaut et définir une flèche personnalisée dans la liste déroulante de sélection dans CSS

Nous pouvons styliser le menu déroulant de sélection en utilisant uniquement CSS en masquant le jeu de flèches par défaut et en ajoutant un jeu de flèches personnalisé. Il existe une propriété CSS appearance qui définit le style d’un élément en fonction du système d’exploitation. Les styles appliqués avec la propriété appearance seront natifs de la plate-forme. On peut utiliser cette propriété sur la balise select et définir la flèche dans le menu déroulant. L’option none dans la propriété appearance masquera la flèche par défaut de la liste déroulante. Ensuite, nous pouvons télécharger notre flèche personnalisée. Nous pouvons utiliser les propriétés -webkit-appearance et -moz-appearance dans les navigateurs WebKit et Blink.

Par exemple, créez une liste déroulante à l’aide des balises select et option en HTML. Écrivez les options de votre choix. En CSS, sélectionnez la balise select et définissez les différentes propriétés comme margin, width, height, padding, font-size, border. Ensuite, utilisez la propriété appearance et définissez-la sur none. Ensuite, utilisez la propriété abrégée background pour définir la flèche personnalisée. Utilisez la fonction url() pour sélectionner l’image. Stylisez l’image avec des propriétés telles que background-repeat, background-size et background-color. Utilisez l’option no-repeat pour afficher l’image une fois. Réglez la position sur 100% et taille de l'arrière-plan sur 15%.

Ainsi, nous avons stylisé un menu déroulant en utilisant CSS.

Exemple de code :

<select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
</select>

select {
 margin: 40px;
 width: 160px;
 padding: 4px 30px 4px 4px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 30px;
 -webkit-appearance: none;
 -moz-appearance: none;
 appearance: none;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}

Utilisez overflow:hidden pour masquer la flèche par défaut et définir une flèche personnalisée dans la liste déroulante de sélection dans CSS

Nous pouvons envelopper la balise select avec un div et définir son overflow sur hidden pour masquer la flèche par défaut dans le menu déroulant. Ensuite, nous pouvons ajouter notre flèche personnalisée, la même que la première méthode. La propriété overflow définie sur hidden écrêtera le débordement dans le conteneur. Le reste du contenu sera masqué. On va définir la largeur du div inférieure au menu déroulant. Ainsi, la flèche dans le menu déroulant tombera en dehors du conteneur lors de l’utilisation de la valeur hidden sur la propriété overflow. Enfin, nous pouvons ajouter notre flèche personnalisée.

Par exemple, créez un div avec la classe menu. À l’intérieur du div, écrivez les mêmes éléments de liste déroulante que dans la première méthode. En CSS, sélectionnez la balise select qui est un descendant de la classe menu en tant que .menu select, et appliquez les styles. Réglez le fond sur transparent. Créez la width de 140px. Réglez font-size sur 14px et créez une bordure. Réglez la hauteur du menu sur 35px. Ensuite, sélectionnez la classe menu et donnez la marge de 40px, la largeur de 125px et la hauteur de 34px. Assurez-vous que la largeur du conteneur est inférieure à celle du menu. Ensuite, définissez le débordement sur hidden et définissez l’image d’arrière-plan comme première méthode.

Ici, nous avons supprimé la flèche par défaut du menu déroulant et nous avons ajouté une flèche personnalisée. Ainsi, nous pouvons styliser le menu déroulant de sélection en CSS.

Exemple de code :

<div class="menu">
 <select>
 <option>RE Himalayan</option>
 <option selected>CRF Rally</option>
 <option>GS 310</option>
 <option>KTM ADV</option>
 </select>
</div>

.menu select {
 background: transparent;
 width: 140px;
 font-size: 14px;
 border: 1px solid #eee;
 height: 35px; 
} 
.menu{
 margin: 40px;
 width: 125px;
 height: 34px;
 border: 1px solid black;
 overflow: hidden;
 background: url(/img/DelftStack/logo.png) 100% / 15% no-repeat #ccc;
}