Wie style ich Formular-Dropdown-Listen?
7 Antworten
Wie oben erwähnt, ist es ziemlich unmöglich, direktes HTML zu verwenden, aber ich hatte gute Ergebnisse mit jQuery Combobox .
Ich habe eine Weile an dem gleichen Problem gearbeitet. Kam zu einer ziemlich einfachen Lösung mit einem Halter div, die kürzer als das Dropdown ist. Ich benutze auch ein Hintergrundbild, um den Dropdown-Pfeil so aussehen zu lassen, wie ich es mag. Schau es dir Ссылка
anAlles was du brauchst ist ein div um das select Tag und 2 CSS Klassen.
HTML:
%Vor%CSS:
%Vor% Dann kann ich nach einer kurzen Javascript-Verifizierung auch die Klasse für das Div in .dropdownbad umschalten, um ihr einen roten Rahmen zu geben.
Die Standard- und Fehlerzustände werden hier angezeigt:
Sie können Stile mithilfe des SELECT-Selektors anwenden oder einen Klassennamen auf ein SELECT-Element anwenden. Sie werden jedoch Probleme mit IE & lt; 8 Dinge wie Grenzen auf das Element anwenden.
Sie können Optionen dann mit dem OPTION-Wahlschalter auswählen.
%Vor%Sollte ein Dropdown mit einem roten Rahmen (wenn FF oder IE8 im Standardmodus verwendet wird) mit fettem Text versehen sein, und die Optionen sollten kursiv mit einem grünen Hintergrund sein.
Es ist möglich, aber umständlich, um es milde auszudrücken. Sie können den Drop-Down-Bereich einer Dropdown-Liste nicht einheitlich über verschiedene Browser hinweg gestalten, da sie alle auf unterschiedliche Weise unterstützt werden (ich meine wirklich unterschiedliche Unterstützung).
Als ich vor ein paar Monaten ein solches Problem hatte, war die einzige Lösung, die ich fand, die Javascript-Liste in ein ul / li-Dropdown-Menü umzuwandeln, das ich stylen konnte. Natürlich gibt es zahlreiche Ereignisse, die behandelt werden müssen, wie die Auswahl eines Wertes.
Glücklicherweise gibt es ein Plugin für JQuery, das dies eine triviale Aufgabe sein kann. (Der angegebene Brainfault-Link für dieses Plugin funktioniert nicht mehr.)
Da diese Frage gestellt wurde, hat sich die Browser-Technologie stark verbessert. Sie können nun ein benutzerdefiniertes Dropdown-Menü erstellen, das vollständig CSS ohne JavaScript verwendet.
Sieh dir diesen Blogpost an: Ссылка
Ich habe Dropdown-Listen in meinem Warenkorb, die hellgrau sind, wenn sie nicht ausgewählt sind. Ich konnte damit den Text schwarz machen:
%Vor%Das war alles was ich ändern musste, also kann ich nicht sagen was du sonst noch tun könntest.
Tags und Links css