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:none
beginnt die Arbeit seit Firefox 35. Obwohl moz-appearance:button
immer 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.
Antworten:
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
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!
quelle
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-indent
undtext-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.
quelle
Um den Standard-Dropdown-Pfeil zu entfernen, verwenden Sie:
-moz-appearance: window;
quelle
Versuchen Sie, die Deckkraft zu setzen: 0; Ihr ausgewähltes Element ist unsichtbar, aber die Optionen werden sichtbar, wenn Sie darauf klicken.
quelle
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 .quelle
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.
quelle
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.
quelle
-moz-background-position
es funktioniert beim Hinzufügen:
Wählen Sie {width: 115%}.
quelle