wake-up-neo.net

Bootstrap 3 Styled Select-Dropdown sieht in Firefox unter OS X hässlich aus

Wenn Sie ein Formularelement <select> in Bootstrap 3 gestalten, wird in Firefox unter OS X eine hässliche Schaltfläche angezeigt:

Ugly select in Firefox on OS X

( http://bootply.com/98385 )

Dies ist anscheinend schon seit einiger Zeit ein bekanntes Problem, und es gibt eine Reihe von Hacks und Workarounds, von denen keiner sehr sauber ist ( https://github.com/twbs/bootstrap/issues/765 ). Ich frage mich, ob jemand eine gute Lösung für dieses Problem gefunden hat, außer Bootstrap-Dropdowns oder zusätzliche Plug-Ins zu verwenden. Ich habe mich bewusst für die Verwendung von HTML <select>s anstelle von Bootstrap-Dropdowns entschieden, da die Benutzerfreundlichkeit mit langen Listen auf mobilen Geräten besser ist.

Ist dies ein Firefox-Problem oder ein Bootstrap-Problem?

Details: Mac OS X 10.9, Firefox 25.0.1

Update 12/4/13: Ich habe einen direkten Vergleich darüber durchgeführt, wie jeder Browser die <select>s unter OS X 10.9 mit Firefox, Chrome und Safari als Antwort auf @zessx (mit http //bootply.com/98425 ). Offensichtlich gibt es einen großen Unterschied zwischen der Darstellung des Formularelements <select> zwischen Browsern und Betriebssystemen:

Each browser renders the select element quite differently

Ich verstehe, dass ein <select>-Tag je nach verwendetem Betriebssystem unterschiedlich gehandhabt wird, da es systemeigene Steuerelemente gibt, die das Styling und das Verhalten bestimmen. Aber was ist das class="form-control" in Bootstrap, das bewirkt, dass ein <select>-Formularelement in Firefox anders aussieht? Warum sieht das standardmäßige <select> in Firefox in Ordnung aus, aber wenn es einmal gestaltet ist, sieht es hässlich aus?

69
bhall

Sie können das graue Feld um den Dropdown-Pfeil im IE tatsächlich ändern:

        select::-ms-expand {
            width:12px;
            border:none;
            background:#fff;
        }

enter image description here

27
jzm

Eigentlich können Sie fast alles mit Dropdown-Feld machen, und es wird auf jedem Browser gleich aussehen 

select.custom {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20fill%3D%22%23555555%22%20%0A%09%20width%3D%2224px%22%20height%3D%2224px%22%20viewBox%3D%22-261%20145.2%2024%2024%22%20style%3D%22enable-background%3Anew%20-261%20145.2%2024%2024%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cpath%20d%3D%22M-245.3%2C156.1l-3.6-6.5l-3.7%2C6.5%20M-252.7%2C159l3.7%2C6.5l3.6-6.5%22%2F%3E%0A%3C%2Fsvg%3E");
  padding-right: 25px;
  background-repeat: no-repeat;
  background-position: right center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select.custom::-ms-expand {
  display: none;
}

https://jsfiddle.net/x76j455z/10/

23
rafx

Aufbauend auf den hervorragenden Antworten von rafx und Sina folgt ein Ausschnitt, der nur auf Firefox abzielt und die Standardschaltfläche durch ein Downcaret ersetzt, das aus dem Bootstrap-Symbolschema kopiert wurde.

Vor:

 default select

Nach dem:

 styled select

@-moz-document url-prefix() {
  select.form-control {
    padding-right: 25px;
    background-image: url("data:image/svg+xml,\
      <svg version='1.1' xmlns='http://www.w3.org/2000/svg' width='14px'\
           height='14px' viewBox='0 0 1200 1000' fill='rgb(51,51,51)'>\
        <path d='M1100 411l-198 -199l-353 353l-353 -353l-197 199l551 551z'/>\
      </svg>");
    background-repeat: no-repeat;
    background-position: calc(100% - 7px) 50%;
    -moz-appearance: none;
    appearance: none;
  }
}

(Die Inline-SVG verfügt über Backslashes und Zeilenumbrüche, um die Lesbarkeit zu verbessern. Entfernen Sie sie, wenn sie Probleme in Ihrer Asset-Pipeline verursachen.)

Hier ist das JSFiddle

19
Tobia

Es gibt ein schick aussehendes jQuery-Plugin, das anscheinend Nice mit Bootstrap namens SelectBoxIt ( http://gregfranko.com/jquery.selectBoxIt.js/ ) spielt. Was mir an der Sache gefällt, ist, dass Sie die native Auswahlbox auf Ihrem Betriebssystem auslösen können, während Sie trotzdem ein einheitliches Styling beibehalten ( http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox ). Oh, ich wünschte, Bootstrap hätte diese Option bereitgestellt!

Der einzige Nachteil besteht darin, dass die Lösung um eine weitere Komplexitätsebene erweitert wird und zusätzliche Arbeit erforderlich ist, um die Kompatibilität mit allen anderen Plug-Ins sicherzustellen, da diese im Laufe der Zeit aktualisiert oder gepatcht werden. Ich bin mir auch nicht sicher, ob Bootstrap 3 kompatibel ist. Dies kann jedoch eine gute Lösung sein, um ein konsistentes Erscheinungsbild zwischen Browsern und Betriebssystemen sicherzustellen.

8
bhall

Ich bin sicher, dass -webkit-appearance:none den Trick für Chrome und Safari macht.

BEARBEITEN: -moz-appearance: none sollte jetzt auch in Firefox funktionieren.

7
Tim Nguyen

Dies ist das normale Verhalten und wird durch den standardmäßigen <select>-Stil unter Firefox verursacht: Sie können line-height nicht einstellen. Sie müssen dann mit padding spielen, wenn Sie einen benutzerdefinierten <select> haben möchten.

Beispiel mit Ergebnissen unter Firefox 25/Chrome 31/IE 10:

<select>
  <option>Default</option>
  <option>Default</option>
  <option>Default</option>
</select>

<select class="form-control">
  <option>Bootstrap</option>
  <option>Bootstrap</option>
  <option>Bootstrap</option>
</select>

<select class="form-control custom">
  <option>Custom</option>
  <option>Custom</option>
  <option>Custom</option>
</select>
select.custom {
  padding: 0px;
}

Bootply

enter image description here

7
zessx

Das ist einfach. Sie müssen nur .form-control Folgendes eingeben:

.form-control{
        -webkit-appearance:none;
        -moz-appearance: none;
        -ms-appearance: none;
        -o-appearance: none;
        appearance: none;
}

Dadurch wird das Erscheinungsbild des Browsers entfernt und Ihr CSS wird zugelassen.

Wir haben das Plugin bootstrap-select für Bootstrap für das Styling ausgewählt. Funktioniert wirklich gut und bietet viele interessante Zusatzfunktionen. Ich kann es auf jeden Fall weiterempfehlen.

1
aahoogendoorn

Ich habe zwei mögliche Wege gefunden, um dieses spezifische Problem zu lösen:

  1. Verwenden Sie gewählt

  2. Richten Sie Mozilla-Browser mit @-moz-document url-prefix() wie folgt aus:

@-moz-document url-prefix() {
  select {
    padding: 5px;
  }
}
1
Sina

Ich verwende Chosen . Siehe: http://harvesthq.github.io/chosen/

Es funktioniert auf Firefox, Chrome, IE und Safari mit demselben Stil. Nicht jedoch auf mobilen Geräten.

0
skip2me99

Mit Bootstrap 4+ können Sie einfach die Klasse custom-select für Ihre Auswahleingaben hinzufügen, um den browserspezifischen Stil zu löschen und die Pfeilsymbole beizubehalten.

Dokumentation hier: Bootstrap 4 Benutzerdefinierte Formulare Menü auswählen

0
Braden Heckman