Ich versuche, den Dropdown-Pfeil eines <select>Elements nur mit CSS zu formatieren. In Chrome / Safari funktioniert er einwandfrei:

select {
  -webkit-appearance: button;
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-padding-end: 20px;
  -webkit-padding-start: 2px;
  -webkit-user-select: none;

  background-image: url('./select-arrow1.png') ;
  background-position: center right;
  background-repeat: no-repeat;
  border: 1px solid #AAA;
  margin: 0;
  padding-top: 2px;
  padding-bottom: 2px;
  width: 200px;
}

Welches macht schön wie hier gesehen

Nach dieser Logik, ich das einzige , was zu tun hatte , um es in Firefox funktioniert war alles hinzuzufügen -webkit-*Sachen wie -moz-*:

-moz-appearance: button;
-moz-border-radius: 2px;
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-moz-padding-end: 20px;
-moz-padding-start: 2px;
-moz-user-select: none;

Es funktioniert zu 99%. Das einzige Problem ist, dass der Standard-Dropdown-Pfeil nicht verschwindet und wie hier gezeigt über dem Hintergrundbild bleibt

Es sieht so aus, als würde -moz-appearance: button;es für ein <select>Element nicht funktionieren . -moz-appearance: none;Hat auch keine Auswirkung darauf, den Standard-Dropdown-Pfeil zu entfernen.

Was ist der richtige Wert -moz-appearance, um den Standard-Dropdown-Pfeil zu entfernen?

Aktualisierung:

11. Dezember 2014 : Hören Sie auf, neue Hacks zu erfinden . Nach viereinhalb Jahren -moz-appearance:nonebeginnt die Arbeit seit Firefox 35. Obwohl moz-appearance:buttonimmer noch kaputt, müssen Sie es trotzdem nicht verwenden. Hier ist ein sehr einfaches Arbeitsbeispiel.

28. April 2014 : Der erwähnte CSS-Hack hat einige Monate funktioniert, aber seit Anfang April 2014 schleicht sich dieser Fehler auf allen Plattformen wieder in Firefox 31.0.a1 Nightly ein.

Das ist es Jungs! FEST!

Warten Sie ab und sehen Sie: https://bugzilla.mozilla.org/show_bug.cgi?id=649849

oder Problemumgehung

Für diejenigen, die sich fragen:

https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c59

Erstens, weil der Fehler viel feindlichen Spam enthält, schafft er einen feindlichen Arbeitsplatz für jeden, der diesem zugewiesen wird.

Zweitens wurde die Person, die dazu in der Lage ist (einschließlich Umschreiben), vorerst einem anderen Projekt (b2g) zugewiesen und hat keine Zeit, bis dieses Projekt kurz vor dem Abschluss steht.

Drittens, selbst wenn diese Person wieder Zeit hat, gibt es keine Garantie dafür, dass dies eine Priorität sein wird, da dies trotz des Webkits gegen die Spezifikation verstößt, wie es funktionieren soll (Dies wurde mir gesagt, ich persönlich nicht kenne die Spezifikation)

Siehe jetzt https://wiki.mozilla.org/B2G/Schedule_Roadmap ;)

Die Seite existiert nicht mehr und der Fehler wurde nicht behoben, aber eine akzeptable Problemumgehung kam von João Cunha. Ihr könnt ihm jetzt dafür danken!

Update: Dies wurde in Firefox v35 behoben. Einzelheiten finden Sie im vollständigen Inhalt .

== wie man den Auswahlpfeil in Firefox ausblendet ==

Ich habe gerade herausgefunden, wie es geht. Der Trick ist , eine Mischung aus zu verwenden -prefix-appearance, text-indentund text-overflow. Es ist reines CSS und erfordert kein zusätzliches Markup.

select {
    -moz-appearance: none;
    text-indent: 0.01px;
    text-overflow: '';
}

Kurz gesagt, wenn Sie es ein wenig nach rechts schieben, wird der Pfeil durch den Überlauf entfernt. Ziemlich ordentlich, oder?

Weitere Details zu diesem Kern habe ich gerade geschrieben. Getestet unter Ubuntu, Mac und Windows, alle mit aktuellen Firefox-Versionen.

Um den Standard-Dropdown-Pfeil zu entfernen, verwenden Sie:

-moz-appearance: window; 

Versuchen Sie, die Deckkraft zu setzen: 0; Ihr ausgewähltes Element ist unsichtbar, aber die Optionen werden sichtbar, wenn Sie darauf klicken.

Unter Mac OS -moz-appearance: window;wird der Pfeil zu den MDN-Dokumenten hier entfernt: https://developer.mozilla.org/en-US/docs/CSS/-moz-appearance . Getestet unter Firefox 13 unter Mac OS X 10.8.2. Siehe auch: https://bugzilla.mozilla.org/show_bug.cgi?id=649849#c21 .

Es lohnt sich, diese beiden Optionen unten auszuprobieren, während wir noch auf die Korrektur in FF35 warten:

select {
    -moz-appearance: scrollbartrack-vertical;
}

oder

select {
    -moz-appearance: treeview;
}

Sie verbergen nur alle Pfeilhintergrundbilder, die Sie in den benutzerdefinierten Stil Ihres ausgewählten Elements eingefügt haben. Sie erhalten also einen Standard-Browserpfeil anstelle einer schrecklichen Kombination aus Browserpfeil und Ihrem eigenen benutzerdefinierten Pfeil.

Obwohl Firefox den Dropdown-Pfeil noch nicht entfernen kann (siehe Beitrag von MatTheCat), können Sie Ihr "stilisiertes" Hintergrundbild in Firefox nicht ausblenden.

-moz-background-position: -9999px -9999px!important;

Dadurch wird es außerhalb des Rahmens positioniert, und Sie erhalten den Standardpfeil für das Auswahlfeld, während die stilisierte Version in Webkit beibehalten wird.

es funktioniert beim Hinzufügen:

Wählen Sie {width: 115%}.