So entfernen Sie den Pfeil von einem ausgewählten Element in Firefox

Lesezeit: 11 Minuten

So entfernen Sie den Pfeil von einem ausgewahlten Element in
Russell Uresti

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


1647264733 635 So entfernen Sie den Pfeil von einem ausgewahlten Element in
João Cunha

Aktualisieren: Dies wurde in Firefox v35 behoben. Siehe die voller Kern für Details.


Gerade herausgefunden So entfernen Sie den Auswahlpfeil aus Firefox. Der Trick besteht darin, eine Mischung aus zu verwenden -prefix-appearance, text-indent und text-overflow. Es ist reines CSS und erfordert kein zusätzliches Markup.

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

Getestet auf Windows 8, Ubuntu und Mac, neueste Versionen von Firefox.

Live-Beispiel: http://jsfiddle.net/joaocunha/RUEbp/1/

Mehr zum Thema: https://gist.github.com/joaocunha/6273016

  • Ich habe einen besonderen Platz in meinem normalerweise kalten Herzen für solche hackigen Fixes. Es ist ziemlich brillant. Der einzige Nachteil ist, dass FF am Ende des Dropdown-Textbereichs (zwischen dem eigentlichen Text und dem Ende des Auswahlfelds) ein Leerzeichen lässt, wodurch ein inkonsistenter Abstand zwischen FF und den anderen Browsern entsteht, aber das ist nur ein kleiner Fehler. Schöner Fund.

    – Russell Uresti

    20. August 2013 um 19:02 Uhr

  • Guter Fang, @RussellUresti. Aber wenn man bedenkt, dass die ganze Idee darin bestehen könnte, einen modifizierten Pfeil bereitzustellen, erweist sich der Raum tatsächlich als nützlich. Ich spielte ein bisschen damit und fügte hinzu padding-right:10px; zum <select> “schiebt” den jetzt unsichtbaren Pfeil nach links. Fazit: Firefox VERSTECKT den Pfeil, Chrome ENTFERNT ihn. Werde meine Texte entsprechend aktualisieren, danke dafür.

    – João Cunha

    21. August 2013 um 17:21 Uhr


  • Ich habe als Antwort ein bisschen Crossbrowser hinzugefügt (nicht in alten Versionen von IE getestet), damit Sie Ihren aktualisieren können

    – Daniel Tulp

    27. November 2013 um 9:42 Uhr

  • Beste Lösung für mich, als -moz-appearence: window funktioniert nicht mit transparenten Hintergründen (zeichne ein hässliches BG an Ort und Stelle, zumindest auf Firefox Linux)

    – Kik

    13. Dezember 2013 um 15:44 Uhr

  • Da der Pfeil dadurch vollständig entfernt wird, sieht das resultierende haben, was natürlich nicht ideal ist.

    – Stuart Badminton

    7. Juni 2011 um 10:37 Uhr

  • Das ist PERFEKT zum Drucken! Setze einfach ein media="print" CSS-Block mit select {-moz-appearance: window;} und entfernt Pfeile und Hintergründe aller Auswahlen auf FF (für andere Browser versuchen Sie es mit Aussehen oder -webkit-Erscheinungsbild), damit sie wie einfacher Text oder Titel aussehen

    – FrancescoMM

    22. März 2013 um 15:12 Uhr


1001750cookie-checkSo entfernen Sie den Pfeil von einem ausgewählten Element in Firefox

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy