CSS für den "Abwärtspfeil" in einem <select>-Element?

Question

Ist es möglich, den Abwärtspfeil auf einem Dropdown-Auswahlelement zu stilisieren, d.h. ( <select><option>--></option></select> )

Ich vermute, dass die Antwort aufgrund der Art und Weise, wie der IE dieses spezielle Element behandelt, nein lautet. Wenn es keine Möglichkeit gibt, kennt jemand eine "gefälschte" Dropdown-Box mit JavaScript, die dieses Verhalten imitieren würde, aber mir die Möglichkeit zur Anpassung geben?

Answer 1

Hier gibt es eine coole CSS-Lösung für die Gestaltung von Dropdowns: http://bavotasan.com/2011/style-select-box-using-only-css/

Im Grunde, wickeln Sie die Auswahl in einem Container div, Stil der Auswahl zu 18px breiter als der Container mit einem transparenten Hintergrund, geben overflow:hidden auf den Container (zum Abschneiden der Browser-generierten Pfeil), und fügen Sie Ihre Hintergrundbild mit stilisierten Pfeil auf den Container.

Funktioniert nicht in IE7 (oder 6), aber im Ernst, ich sage, wenn Sie IE7 verwenden, verdienen Sie eine weniger hübsche Dropdown-Erfahrung.

Answer 2

Vielleicht können Sie jQuery selectbox Ersatz . Es ist ein jQuery-Plugin.

Answer 3

Nein, der Abwärtspfeil ist ein Browser-Element. Er ist in jedem Browser eingebaut [und anders]. Sie können jedoch das Auswahlfeld durch ein benutzerdefiniertes Dropdown-Feld mit Javascript ersetzen.

Jan Hancic erwähnte ein jQuery-Plugin, das genau dies ermöglicht.

Answer 4

Das Dropdown ist ein Element auf Plattformebene, auf das Sie kein CSS anwenden können.

Sie können mit CSS ein Bild darüberlegen und das Klick-Ereignis im darunter liegenden Element aufrufen.

Answer 5

Mit CSS lassen sich Combos nicht besonders gut gestalten.

Die Jungs von FogBugz haben eine ziemlich gute benutzerdefinierte Kombination mit JavaScript gemacht, also ist es möglich, es braucht nur eine Menge Arbeit, um es richtig zu machen.

Es ist besser, bei der Standardversion 1 zu bleiben und dann zu sehen, ob es sich lohnt, sie zu aktualisieren, sobald Ihre Anwendung in freier Wildbahn ist.