Styliser un element select uniquement avec CSS

Pour ceux qui n’ont pas encore totalement vendu leur âme à Bootstrap pour styliser un bouton, l’element select reste un de ceux qui pose le plus de problème.

Voici ma petite technique permettant de le styliser comme vous le voulez, tout en gardant la petite flèche vers le bas qui indique à l’utilisateur que ce n’est pas un bouton mais bien une liste déroulante.

Voici l’exemple :

En découpant le code CSS, on obtient:

-webkit-appearance:     none;
-moz-appearance:     none;
appearance:     none;

Pour demander au navigateur de ne pas appliquer les styles par défaut d’un select.

background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHg9IjBweCIgeT0iMHB4Ij48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTIgMThsLTExLjAxOS0xMWgyMi4wMzh6Ii8+PC9zdmc+);

Défini un triangle noir en SVG comme image de fond. En effet, pour tout autre element qu’un select, un pseudo-élement aurait fait le job mais un select à pour comportement de masquer ses noeuds enfants.

background-size: .8em;
background-repeat: no-repeat;
background-position: calc(100% - .4em) center;

On donne a cette image de fond une taille, on limite la répétition et on utilise calc() pour pouvoir le placer toujours à droite mais avec un décalage du bord.

padding:        .5em 2em .5em .9em;

Touche finale, on applique un padding sur l’element pour que triangle ne chevauche pas le texte

Et c’est tout. Le code complet ci-dessous.

select {
    -webkit-appearance:     none;
    -moz-appearance:        none;
    appearance:             none;
    display:        inline-block;
    padding:        .5em 2em .5em .9em;
    cursor:         pointer;
    color:          rgb(70, 81, 88);
    font-family:    inherit;
    font-size:      1em;
    border:         1px solid rgb(207, 210, 219);
    border-radius:  .2em;
    background-color:     rgb(250, 250, 250);
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMjAwJyBoZWlnaHQ9JzIwMCcgZmlsbD0iIzAwMDAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHg9IjBweCIgeT0iMHB4Ij48cGF0aCBmaWxsPSIjMDAwMDAwIiBkPSJNMTIgMThsLTExLjAxOS0xMWgyMi4wMzh6Ii8+PC9zdmc+);
    background-size: .8em;
    background-repeat: no-repeat;
    background-position: calc(100% - .4em) center;
}

Leave a Reply

Your email address will not be published. Required fields are marked *