CSS pour la "flèche vers le bas" sur un élément <select> ?

Question

Est-il possible de styliser la flèche vers le bas sur un élément de sélection déroulante ? par exemple, (-->)

Je soupçonne que la réponse est non en raison de la manière dont IE gère cet élément particulier. S'il n'y a pas de moyen, est-ce que quelqu'un sait s'il existe une boîte de sélection 'fausse' utilisant JavaScript qui imiterait ce comportement mais me donnerait la possibilité de la personnaliser ?

Answer 1

Il existe une solution CSS uniquement sympa pour styliser les menus déroulants ici: http://bavotasan.com/2011/style-select-box-using-only-css/

En gros, enveloppez simplement le select dans un div conteneur, stylisez le select pour qu'il soit 18px plus large que le conteneur avec un arrière-plan transparent, donnez overflow:hidden au conteneur (pour couper la flèche générée par le navigateur), et ajoutez votre image d'arrière-plan avec flèche stylisée au conteneur.

Ne fonctionne pas dans IE7 (ou 6), mais sérieusement, je dis que si vous utilisez IE7, vous méritez une expérience de menu déroulant moins jolie.

Answer 2

Peut-être que vous pouvez utiliser remplacement de selectbox jQuery. C'est un plugin jQuery.

Answer 3

Si cela se trouve être une exigence commerciale pour vous, que vous deviez ou non le faire, cela fonctionne bien:

http://cssglobe.com/post/8802/custom-styling-of-the-select-elements

Answer 4

Non, la flèche vers le bas est un élément du navigateur. C'est intégré [et différent] dans chaque navigateur. Cependant, vous pouvez remplacer la boîte de sélection par une boîte de liste personnalisée en utilisant JavaScript.

Jan Hancic a mentionné un plugin jQuery pour faire exactement cela.

Answer 5

Le menu déroulant est un élément de niveau plateforme, vous ne pouvez pas lui appliquer de CSS.

Vous pouvez superposer une image par-dessus en utilisant du CSS, et déclencher l'événement de clic dans l'élément en dessous.