CSS

Skinner un select en full CSS

Pour modifier le style d’une liste déroulante (select), vous avez deux possibilités :

  • soit vous faites un faux select avec une liste avec des ul et li et du javascript
  • soit vous le skinnez en full css via les CSS3

C’est le deuxième point que l’on va détailler ici :

Code html de départ

<div class="select-custom">
    <select>
          <option>Option 1</option>
          <option>Option 2</option>
          <option>Option 3</option>
     </select>
</div>

Code CSS

En appliquant la règle appearance: none; au select on va supprimer l’apparence native du select.
Pour IE10 et + on utilise le pseudo-élément ::-ms-expand

.select-custom select {
  display: inline-block;
  width: 100%;
  cursor: pointer;
  padding: 10px 35px 10px 15px;
  outline: 0;
  border: 0;
  border-radius: 0;
  background: #e6e6e6;
  color: #666;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  font-family: 'Open Sans', Arial, Helvetica, sans-serif;
}
.select-custom select::-ms-expand {
  display: none;
}

On customize la flèche du select. Ici j’ai mis une icône utf8, mais vous pouvez mettre ce que vous voulez, même une image ou une web-font.

.select-custom:after {
  content: "\25BC";
  position: absolute;
  top: 0;
  right: 0;
  font-size: 70%;
  width: 30px;
  text-align: center;
  padding-top: 12px;
  padding-bottom: 10px;
  pointer-events: none;
  color: #666666;
}

Démonstration

See the Pen Custom Select in full CSS by Catherine Plichon (@katplich) on CodePen.

Limites de cette méthode

Le comportement du select reste natif. Ex : sous IE la liste déroulante des options va s’afficher par dessus le select, comme nativement.

Par ailleurs, vous ne pouvez pas changer les couleurs au hover de la liste déroulante. (la couleur bleu)

Sélect déroulé sous IE
Sélect déroulé sous IE
Select déroulé sous chrome
Select déroulé sous chrome

Compatibilité

Si vous souhaitez que votre select s’affiche en version custom pour les navigateurs récents et en version standard pour les IE9 et moins, je vous conseille d’utiliser des commentaires conditionnels.

Si votre select doit être custom même pour IE 9 et moins, je vous conseille de vous tourner vers la méthode de simuler un select avec des ul et li (méthode je que vais détailler dans un prochain article)

voir la démo

Laisser un commentaire

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