webentwicklung-frage-antwort-db.com.de

Twitter Bootstrap Select Arrow fehlt

Ich habe ein Problem mit der Dropdown-Schaltfläche "Auswählen" in Twitter-Bootstrap. Dies geschieht in den beiden Browsern, die ich auf dem Computer installiert habe (IE11, Chrome), und ist nicht nur auf "Meine Websites" beschränkt.

Hier ist ein Screenshot der Bootstrap-Website (Betriebssystem: Windows 8.1 Broswer: Chrome) ( http://getbootstrap.com/css/#forms-controls ):

Example

Ich habe das Konsolenfenster überprüft und alle Ressourcen werden korrekt geladen.

Könnte mir jemand helfen, warum dies geschieht/Schritte zu lösen sind?

13
Gareth

TL; DR: Sie können das Symbol nicht mit CSS ändern. Sie müssen eine Bibliothek verwenden, die ein select-like-Steuerelement mithilfe von HTML und JavaScript implementiert (auf Kosten von mobilfreundlichen Selects für iOS und Android).

Das in <select> angezeigte Symbol wird vom Browser oder Betriebssystem des Benutzers bestimmt. Sie können es nicht mit CSS ändern.

Anzeige in Chrome auf einem Mac auswählen:

 Select display in Chrome on a Mac

Wählen Sie die Anzeige in Chrome auf einem Mac, wobei einige Stile entfernt wurden:

Ich habe Linienhöhe, Hintergrundfarbe, Rand, Randradius und Rahmenschatten entfernt. Beachten Sie, dass sich der Pfeil geändert hat, obwohl ich keinen verwandten Stil geändert habe.

 Select display in Chrome on a Mac with some styles removed

Anzeige in Chrome unter Windows auswählen:

 Select display in Chrome on Windows

Beachten Sie, dass die Symbole unterschiedlich sind, obwohl der Code derselbe ist.

Was jetzt?

Obwohl select nicht sehr ansprechend ist, gibt es viele Bibliotheken, die eine sehr anpassbare Implementierung eines select-like-Steuerelements bieten. Ich benutze gerne Bootstrap-select .

Diese Bibliothek erstellt einen <div class="caret"></div>, der zum Ändern des Symbols gestaltet werden kann. Nach dem Einfügen des Bootstrap-select-JavaScript beispielsweise den folgenden Code:

HTML

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

CSS

.caret{
    color: red;
}

Gibt mir diese Anzeige:

 Bootstrap-select example image

Sie verlieren jedoch das mobile Display:

Durch die Verwendung einer benutzerdefinierten Bibliothek wird die mobilfreundliche Methode deaktiviert, die von iOS und Android ausgewählt wird. Stellen Sie daher sicher, dass ein benutzerdefiniertes Symbol für Sie wichtig genug ist, bevor Sie fortfahren.

 enter image description here

12
Joshua Dwire

Benutzen  dropdown Image für auswählen

select {
-moz-appearance: none;
background: rgba(0, 0, 0, 0) url("../images/dropdown.png") no-repeat scroll 100% center / 20px 13px !important;
border: 1px solid #ccc;
overflow: hidden;
padding: 6px 20px 6px 6px !important;
width: auto;
}
3
Saran

Sie können das <select>-Element zu diesem Zeitpunkt nicht formatieren. Jeder Browser verwendet sein eigenes Design für die meisten Formularelemente.

Sie können also Ihre eigene Auswahl erstellen, indem Sie die ursprüngliche Auswahl ausblenden, Markierungen erstellen, z. div mit ul + li und leben Sie mit Javascript.

ODER

Wenn Sie nichts dagegen haben, jQuery zu verwenden, probieren Sie diese Bibliotheken:

0
vbarinov

Ich habe dieses Verhalten mit IE unter Windows 8.1 erlebt. Aus irgendeinem Grund stellt IE den Pfeil anders dar, sobald Sie das select-Element formatieren (was bei Bootstrap-Designs normalerweise der Fall ist). Selbst etwas so einfaches wie das Festlegen der Hintergrundfarbe löst dieses Verhalten aus.

Die einzige Lösung, die ich bisher gefunden habe, ist, den Pfeil nach Bedarf zu gestalten. Sie können dazu das :: - ms-expand pseudo-Element verwenden. Die folgende CSS-Regel sollte das "Standard" -Look wiederherstellen:

select::-ms-expand {
  background-color: #fff;
  border: none;
}
0
a better oliver