it-swarm.com.de

Wie lautet der korrekte "-moz-Aussehen" -Wert, um den Dropdown-Pfeil eines <select> -Elements auszublenden

Ich versuche, den Dropdown-Pfeil eines <select>-Elements nur mit CSS zu formatieren. Es funktioniert perfekt in Chrome/Safari:

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;
}

Was wunderschön rendert wie hier zu sehen

Nach dieser Logik musste ich lediglich alles -webkit-*-Zeug als -moz-* hinzufügen:

-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 für 99%. Das einzige Problem ist, dass der Standard-Dropdown-Pfeil nicht entfernt wird und auf dem Hintergrundbild wie hier zu sehen bleibt.

Anscheinend funktioniert -moz-appearance: button; nicht für ein <select>-Element. -moz-appearance: none; hat auch keinen Effekt, um den Standard-Dropdown-Pfeil zu entfernen.

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

Aktualisierung:

11. Dezember 2014: Schluss mit dem Erfinden neuer Hacks. Nach viereinhalb Jahren funktioniert -moz-appearance:none seit Firefox 35. Obwohl moz-appearance:button immer noch fehlerhaft ist, müssen Sie es trotzdem nicht verwenden. Hier ist ein sehr einfaches Arbeitsbeispiel.

28. April 2014: Das erwähnte css hack arbeitete einige Monate, aber seit Anfang April 2014 schleicht sich dieser Fehler auf allen Plattformen wieder in Firefox 31.0.a1 Nightly ein.

67
Tony

Das ist es Jungs! FEST!


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

oder Abhilfe


Für diejenigen, die sich fragen:

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

Erstens, da der Fehler viele feindselige Spam-Mails enthält, wird für jeden, der ihm zugewiesen wird, ein feindseliger Arbeitsplatz geschaffen. 

Zweitens wurde die Person, die dazu in der Lage ist (einschließlich des Umschreibens), vorläufig einem anderen Projekt (b2g) zugewiesen und hat keine Zeit, bis sich dieses Projekt dem Abschluss nähert.

Drittens, auch wenn diese Person wieder Zeit hat, gibt es keine Garantie, dass dies eine Priorität sein wird, denn trotz der Tatsache, dass dies beim Webkit der Fall ist, wird die Spezifikation für die Funktionsweise gebrochen weiß 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 danken!

38
MatTheCat

Update: Dieses Problem wurde in Firefox v35 behoben. Weitere Informationen finden Sie in der full Gist .


== So blenden Sie den Auswahlpfeil in Firefox == aus

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

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

Um es kurz zu machen: Wenn Sie es ein wenig nach rechts schieben, wird der Pfeil aus dem Überlauf entfernt. Ziemlich ordentlich, oder?

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

98
João Cunha

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

-moz-appearance: window; 
4
RD.

Setzen Sie die Deckkraft: 0; Ihr select-Element ist unsichtbar, aber die Optionen werden sichtbar, wenn Sie darauf klicken.

1
Josh Byvelds

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

0
Joshua Davis

Es lohnt sich, diese beiden Optionen auszuprobieren, während wir noch auf den Fix in FF35 warten:

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

oder

select {
    -moz-appearance: treeview;
}

Sie blenden einfach jedes Pfeil-Hintergrundbild aus, das Sie eingefügt haben, um Ihr ausgewähltes Element anzupassen. So erhalten Sie einen standardmäßigen Browserpfeil anstelle einer schrecklichen Kombination aus Browserpfeil und Ihrem eigenen benutzerdefinierten Pfeil.

0
El Guapo