68 votes

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

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 ?

57voto

Lavabeams Points 1852

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>

0 votes

C'est une bonne solution, mais il y a deux problèmes : 1. dans IE8 un fond bleu après la sélection est sur l'image de la flèche, 2. dans Opera l'image de la flèche n'est pas visible. :(

18 votes

Il s'agit plus d'un guide que d'un travail à la place de l'OP.

1 votes

@Sphvn : Belle réponse, j'ai ajouté -moz-appearance: none & appearance: none à votre solution pour gérer la plupart des navigateurs.

20voto

TomHastjarjanto Points 4543

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

4voto

Diodeus Points 67946

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é.

1voto

Chad Birch Points 39087

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

1voto

Richard Points 11249

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/

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X