Ich versuche, a zu stylen select
Element mit CSS3. Ich erhalte die gewünschten Ergebnisse in WebKit (Chrome / Safari), aber Firefox spielt nicht gut (ich kümmere mich nicht einmal um IE). Ich verwende CSS3 appearance
-Eigenschaft, aber aus irgendeinem Grund kann ich das Dropdown-Symbol nicht aus Firefox herausschütteln.
Hier ist ein Beispiel dafür, was ich tue: http://jsbin.com/aniyu4/2/edit
#dropdown {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
background: transparent url('example.png') no-repeat right center;
padding: 2px 30px 2px 2px;
border: none;
}
Wie Sie sehen können, versuche ich nichts Besonderes. Ich möchte nur die Standardstile entfernen und meinen eigenen Dropdown-Pfeil hinzufügen. Wie ich schon sagte, großartig in WebKit, nicht großartig in Firefox. Anscheinend die -moz-appearance: none
wird das Dropdown-Element nicht los.
Irgendwelche Ideen? Nein, JavaScript ist keine Option
Dazu gibt es jetzt einen Bugreport: bugzilla.mozilla.org/show_bug.cgi?id=649849
– schleilan
25. Juli 2011 um 21:07 Uhr
Gewählt ist eine JavaScript-Bibliothek, die Ihre Auswahl für Sie gestaltet und sie wirklich schick aussehen lässt. Könnte einen Blick wert sein, obwohl es Ihr Problem wahrscheinlich nicht lösen wird.
– stephenmurdoch
2. August 2011 um 9:33 Uhr
Vielleicht finden Sie diesen Blogbeitrag hilfreich: red-team-design.com/making-html-dropdowns-not-suck
– Rui Marken
12. Dezember 2014 um 19:52 Uhr
Sieht so aus, als hätten sie die hinzugefügt
-moz-appearance
CSS3-Eigenschaft, die ich verwende-moz-appearance: none;
und es scheint in Version 35.0.1 zu funktionieren.– Toni M
19. Februar 2015 um 16:45 Uhr
Eine einfache Lösung wäre, das select-Element breiter als den Container zu machen. Und wickeln Sie ein Mozilla-URL-Präfix ein, damit die Optionen in Firefox nur breiter sind.
@-moz-document url-prefix() { select { width: 105%; overflow: hidden; } }
– Lukas Femur
16. Juni 2015 um 11:20 Uhr