web-dev-qa-db-fra.com

Twitter Bootstrap Select Arrow manquant

J'ai un problème avec le bouton de sélection déroulant dans le bootstrap de Twitter. Cela se passe dans les deux navigateurs que j'ai installés sur la machine (IE11, Chrome) et ce n'est pas limité à "mes sites".

Voici une capture d'écran du site Web bootstrap (OS: Windows 8.1 Broswer: Chrome) ( http://getbootstrap.com/css/#forms-controls ):

Example

J'ai vérifié la fenêtre de la console et toutes les ressources se chargent correctement.

Quelqu'un pourrait-il m'aider à comprendre pourquoi cela se produit/à résoudre le problème?

htmlcsstwitter-bootstrapdrop-down-menu
13
Gareth

TL; DR: vous ne pouvez pas utiliser CSS pour changer l'icône. Vous devrez utiliser une bibliothèque qui implémente un contrôle de type sélection utilisant HTML et JavaScript (au détriment des sélections compatibles avec les appareils mobiles sur iOS et Android).

L'icône affichée dans <select> est déterminée par le navigateur ou le système d'exploitation de l'utilisateur. Vous ne pouvez pas le changer en utilisant CSS.

Sélectionnez l'affichage dans Chrome sur un Mac:

 Select display in Chrome on a Mac

Sélectionnez l'affichage dans Chrome sur un Mac avec certains styles supprimés:

J'ai supprimé hauteur de ligne, couleur d'arrière-plan, bordure, rayon de bordure et ombre de boîte. Notez que la flèche a changé même si je n’ai modifié aucun style associé.

 Select display in Chrome on a Mac with some styles removed

Sélectionnez l'affichage dans Chrome sous Windows:

 Select display in Chrome on Windows

Notez que les icônes sont différentes, même si le code est le même.

Maintenant quoi?

Bien que select ne soit pas très stylable, de nombreuses bibliothèques fournissent une implémentation très personnalisable d’un contrôle de type select. J'aime utiliser Bootstrap-select .

Cette bibliothèque crée un <div class="caret"></div> qui peut être stylé pour changer l'icône. Par exemple, après avoir inclus le code JavaScript Bootstrap-select, le code suivant:

HTML

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

CSS

.caret{
    color: red;
}

Me donne cet affichage:

 Bootstrap-select example image

Vous allez perdre l'affichage mobile, cependant:

L'utilisation d'une bibliothèque personnalisée désactive la méthode de sélection conviviale pour les implémentations iOS et Android. Assurez-vous donc qu'une icône personnalisée est suffisamment importante pour vous avant de continuer.

 enter image description here

12
Joshua Dwire

Utilisation  dropdown Image pour select

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

Vous ne pouvez pas appeler l'élément <select> lui-même pour le moment. Chaque navigateur applique son propre style à la plupart des éléments de formulaire.

Vous pouvez ainsi créer votre propre sélection personnalisée en masquant celle d'origine, créer un balisage, par exemple. div avec ul + li et le faire vivre avec javascript.

OU

Si cela ne vous dérange pas d'utiliser jQuery, essayez ces bibliothèques:

0
vbarinov

J'ai eu ce comportement avec IE sous Windows 8.1. Pour une raison quelconque, IE affiche la flèche différemment dès que vous commencez à styler l'élément select (ce que font habituellement les thèmes bootstrap). Même quelque chose d'aussi simple que de définir la couleur d'arrière-plan déclenche ce comportement.

La seule solution que j'ai trouvée jusqu'à présent consiste à styliser la flèche au besoin. Vous pouvez utiliser le :: - ms-expand pseudo élément pour cela. La règle css suivante devrait restaurer l'aspect "par défaut":

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