Was ist der richtige Wert für "-moz-Erscheinungsbild", um den Dropdown-Pfeil eines <select> -Elements auszublenden?

68

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.

Tony
quelle
1
Nur um Sie wissen zu lassen, dass der Fehler in Firefox 35 \ o /
MatTheCat
1
@MatTheCat wow nach 4,5 Jahren! In der Zwischenzeit habe ich 2 Freundinnen, 3 Hunde und 2 Wohnungen gewechselt. Aber ich denke, wir müssen dankbar sein, dass sie es endlich halb repariert haben.
Tony
Dies bedeutet, dass <FF35 entweder unseren benutzerdefinierten Pfeil oder den Standardpfeil ausblenden muss. Andernfalls sehen Sie beide Pfeile.
TR3B

Antworten:

38

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!

MatTheCat
quelle
1
Vielen Dank! Hoffentlich wird es bald behoben. Um dieses Problem zu umgehen, verwende ich den Originalcode in der anderen Frage, die Sie beantwortet haben
Tony
7
Meine Güte, ein Jahr später und es scheint, wir können noch warten.
MatTheCat
3
Ja, es ist ziemlich traurig, dass der Status dieses Fehlerberichts nach anderthalb Jahren bei "NEU" bleibt
Tony
1
Ich habe Ihrer Antwort einen Link hinzugefügt. Sie verdienen Sichtbarkeit für Ihren Trick!
MatTheCat
1
Ha! Ich finde es ziemlich lustig (und traurig), dass die Leute jetzt diese Art von Hacks implementieren, um grundlegende CSS-Fehler in einer sogenannten Open-Source-Browser-Engine zu beheben! Nur weil die Mächte sich weigern, diesen Fehler zu beheben. Erinnert mich an all die IE6-Hacks, die die Leute erfunden haben ...
Tony
99

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.

João Cunha
quelle
Dies ist eine gute
Lösung
Ja, @MathiasaurusRex. Welches Betriebssystem und welche Browserversion testen Sie? Ich arbeite gerade an einem Antwortformular und habe es gerade bestätigt.
João Cunha
1
@ JoãoCunha Entschuldigung, ich habe falsch geschrieben. Ich wollte den Zoom des Ansichtsfensters auf weniger als 100% reduzieren. Ich verwende FireFox 26.0 und arbeite unter OSX 10.9.1. Hier ist ein JSFiddle - jsfiddle.net/2Vtf9/1 Wenn Sie den Befehl minus (-) drücken, der den Zoom auf 90% reduziert, wird der Dropdown-Pfeil angezeigt.
Mathias Rechtzigel
Kein allzu großes Problem, da das Update sowieso eine Art Hack ist und Mozilla nur den Fehler beheben muss. Ihr Fix und die Art und Weise, wie er auf Zoom reagiert, erscheinen mir logisch!
Mathias Rechtzigel
10
Ich möchte nur darauf hinweisen, dass diese Problemumgehung ab Firefox 31 (nächtlicher Build, Mai 2014) nicht mehr funktioniert. Soweit ich weiß, gibt es derzeit keine Problemumgehung.
Bendik
4

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

-moz-appearance: window; 
RD.
quelle
Dies ist nicht einmal ein gültiger Wert, gemäß den unter developer.mozilla.org/en-US/docs/CSS/-moz-appearance aufgeführten Werten , und es funktioniert natürlich nicht: i.imgur.com/w4hwD.jpg
Tony
Funktioniert unter MacOS / Firefox v 19.0.2
Adrian Florescu
Das hat bei mir sicherlich funktioniert. MacOS 10.9 / Firefox33.0
Sean Larkin
Funktioniert nur unter Mac OSX aus irgendeinem seltsamen Grund, funktioniert definitiv nicht unter Windows
Erin Drummond
1

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

Josh Byvelds
quelle
10
Wenn das Auswahlelement unsichtbar ist, wie sollen wir dann auf die Optionen klicken? Indem Sie ein breites Hintergrundbild auf die Auswahl setzen? Und woher wissen Sie, welche Option Sie gerade ausgewählt haben? Indem Sie ein Onchange-Ereignis einfügen und Text auf der Seite aktualisieren? Es tut mir leid, aber das ist überhaupt keine Antwort. Es ist ein haariger Riesenhack.
Tony
0

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.

El Guapo
quelle
-2

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.

mattisahuman
quelle
2
Warum sollte ich das tun wollen?
Tony
Es gibt keine-moz-background-position
Billynoah
1
Sie können jedoch @ -moz-document url-prefix () {select {Hintergrundposition: -9999px! wichtig; }}
Billynoah
-3

es funktioniert beim Hinzufügen:

Wählen Sie {width: 115%}.

Sam
quelle
2
Dies sollte ein Kommentar sein.
Ariel Magbanua