Comment styler un select pour qu’il soit identique sur tous les navigateurs

Ce post est la traduction d’un article sur lequel je suis tombé et qui est très intéressant.

Vous pouvez retrouver l’article source en ligne ici : https://www.filamentgroup.com/lab/select-css.html

Créer un champ select qui s’affiche de la même manière quel que soit le navigateur a souvent été compliqué. Beaucoup d’astuces ont été utilisées par le passé, comme styler l’élément parent, des pseudo éléments ou encore Javascript. Mais tout ceci n’est pas simple à maintenir et à utiliser, sans parler des soucis d’accessibilité que cela entraine.

Voici un exemple de css permettant d’avoir un rendu quasi identique quel que soit votre navigateur d’une liste select

Le Code CSS ( et explications)

.select-css {
    display: block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    width: 100%;
    max-width: 100%; 
    box-sizing: border-box;
    margin: 0;
    border: 1px solid #aaa;
    box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
    border-radius: .5em;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
      linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%);
    background-repeat: no-repeat, repeat;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
}
.select-css::-ms-expand {
    display: none;
}
.select-css:hover {
    border-color: #888;
}
.select-css:focus {
    border-color: #aaa;
    box-shadow: 0 0 1px 3px rgba(59, 153, 252, .7);
    box-shadow: 0 0 0 3px -moz-mac-focusring;
    color: #222; 
    outline: none;
}
.select-css option {
    font-weight:normal;
}

Vous pouvez retrouver ce CSS sur (Github)[https://github.com/filamentgroup/select-css/blob/master/src/select-css.css]

  • Le select est mis display: block par défaut, mais vous pouvez très bien le mettre en display: inline-block; width: auto; par exemple pour avoir un label sur la même ligne
  • Le background du select est créé en utilisant 2 images de background, la première est une flèche en SVG (encodé en data URI) et la seconde est un dégradé linéaire qui se répète. Si vous modifiez la taille de l’icone de fleche, gardez en tête que sa taille est déclarée dans la section du background-size: .65em auto, 100%, et sa position est faite via background-position: right .7em top 50%, 0 0; De même, si vous changez la taille, il faudra sans doute changer le padding right du bouton afin qu’il ne survole pas le texte du select, attention toutefois à IE9 et plus ancien, cette flèche personnalisée n’apparaitra pas, et la fleche par défaut du navigateur s’affichera à gauche du padding, donc n’ajoutez pas trop de texte ou sinon la flèche sous IE9 posera souci.
  • Le dégradé linéaire est important à garder, car il empeche IE9 de reconnaitre la propriété de background, et donc il n’affichera pas la flèche personnalisée en même temps que la flèche navigateur natif incachable. Si vous voulez une couleur unie et non un dégradé, il suffit d’utiliser un dégradé composé de 2 fois la même couleur.
  • les règles avec les préfixes de versions sont importantes et permettent de désactiver certains styles par défaut des navigateurs.
  • La règle font-size:16px; est important car Safari iOs va zoomer si le texte est plus petit que 16px. Ce comportement étant généralement gênant nous avons souhaité l’éviter avec cette règle.
  • Les options de la classe .select-css permet d’éviter aux éléments d’hériter de la font-weight:bold du bouton select en lui même.
  • Comme indiqué dans l’article de Scott O’Hara, il vaut mieux éviter de définir une couleur de background pour les selects (pour éviter des erreurs lors d’héritage de styles)
  • La règle .select-css::-ms-expand permet à IE11 et IE10 de cacher la flèche par défaut afin que notre flèche personnalisée soit visible. Merci pour cette astuce Jelmer de Maat.

Voici une page de démo avec plusieurs tests : http://filamentgroup.github.io/select-css/demo/

Le rendu sur les navigateurs

Voici des captures d’écran du rendu sur différents navigateurs.

mike

mike

Chef de projet web, Mike assure la réussite de projets digitaux depuis 2011. Son but est d'aider les webmasters et les freelances à tirer le meilleur des outils comme WordPress, WooCommerce et Elementor. Sur ce blog il partage son expérience, ses astuces et les pépites dénichées sur le web. Côté pro, Mike adore apprendre de nouveaux trucs et faire progresser les autres, et côté perso les afters, faire des shoots de baskets et les films d'horreur. La légende raconte qu'avec un mojito il vous accordera +4xp de confiance

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Thématiques

Vous recherchez des astuces dans un secteur donné ? Vous pouvez accéder directement à la catégorie qui vous intéresse !