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: "BC";
  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)

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