Modifier la couleur et l'apparence de la flèche descendante

Question

Je souhaite modifier l'apparence par défaut de la flèche d'une liste déroulante afin qu'elle soit la même dans tous les navigateurs. Existe-t-il un moyen de remplacer l'apparence par défaut de la flèche d'une liste déroulante en utilisant des feuilles de style en cascade ou autre ?

Answer 1

Vous pouvez y parvenir avec CSS, mais vous ne modifiez pas techniquement la flèche elle-même.

Dans cet exemple, je cache en fait la flèche par défaut et j'affiche ma propre flèche à la place.

.styleSelect select {
  background: transparent;
  width: 168px;
  padding: 5px;
  font-size: 16px;
  line-height: 1;
  border: 0;
  border-radius: 0;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: #000;
}

.styleSelect {
  width: 140px;
  height: 34px;
  overflow: hidden;
  background: url("images/downArrow.png") no-repeat right #fff;
  border: 2px solid #000;
}

<div class="styleSelect">
  <select class="units">
    <option value="Metres">Metres</option>
    <option value="Feet">Feet</option>
    <option value="Fathoms">Fathoms</option>
  </select>
</div>

Answer 2

Non, il est très difficile, voire impossible, d'assurer la confidentialité des formulaires pour tous les navigateurs. Si vous vous souciez vraiment de l'apparence de ces widgets, vous devriez utiliser une implémentation javascript.

voir http://www.456bereastreet.com/archive/200409/styling_form_controls/ et http://developer.yahoo.com/yui/examples/button/btn_example07.html

Answer 3

Le site <select> est généré par l'application et le style ne fait pas partie des spécifications CSS/HTML.

Vous devriez le simuler avec votre propre DIV et le superposer à celui existant, ou construire votre propre contrôle émulant la même fonctionnalité.

Answer 4

Non, vous ne pouvez pas le faire en utilisant un vrai <select> mais il existe des techniques qui vous permettent de les "remplacer" par des solutions en javascript qui ont un meilleur aspect.

Voici un bon article sur le sujet : <sélection> Quelque chose de nouveau

Answer 5

Pas facile à faire, j'en ai peur. Le problème est que le CSS ne peut pas remplacer la flèche dans une sélection, car elle est rendue par le navigateur. Mais vous pouvez construire un nouveau contrôle à partir d'éléments div et input et de Javascript pour réaliser la même fonction que le select.

Essayez de regarder certains des plugins de complétion automatique pour Jquery par exemple.

Sinon, il y a quelques informations sur l'élément de sélection ici :

http://www.devarticles.com/c/a/Web-Style-Sheets/Taming-the-Select/