Bootstrap 3 Style Sélectionnez le menu déroulant semble laid dans Firefox OS X

Question

Lorsque le style d'une forme <select> élément dans le Bootstrap 3, il rend un vilain bouton sur le dans Firefox sur mac OS X:

(http://bootply.com/98385)

Cela a apparemment été un problème connu pour un certain temps, et il y a un certain nombre de hacks et des solutions de contournement, dont aucun n'est très propre (https://github.com/twbs/bootstrap/issues/765). Je me demandais si quelqu'un a trouvé une bonne solution à ce problème autrement que par l'utilisation de Bootstrap des listes déroulantes ou des plugins supplémentaires. J'ai délibérément choisi d'utiliser le langage HTML <select>'plutôt que de Bootstrap dropdowns parce que l'ergonomie est mieux avec de longues listes sur des appareils mobiles.

Est-ce un Firefox problème ou un problème de Bootstrap?

Détails: Mac OS X 10.9, Firefox 25.0.1

Mise à jour 12/4/13: j'ai fait un side-by-side de comparaison de la façon dont chaque navigateur rend l' <select>'s sur OS X 10.9 à l'aide de Firefox, Chrome et Safari, en réponse à @zessx (à l'aide de http://bootply.com/98425). Évidemment, il y a une grande différence entre la façon dont l' <select> d'élément de formulaire est rendu sur tous les navigateurs et systèmes d'exploitation:

Je comprends que l' <select> balise est gérée différemment selon le système d'exploitation que vous utilisez, car il y a native OS basés sur des contrôles qui dictent le style et le comportement. Mais, qu'est - class="form-control" dans le Bootstrap qui provoque un <select> d'élément de formulaire différent dans Firefox? Pourquoi le défaut, de l'onu-style <select> dans Firefox regarder bien, mais une fois qu'il est en forme, il semble laid?

Answer 1

Vous pouvez réellement changer la zone grise autour de la flèche de menu déroulant dans IE:

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

Answer 2

Il y a un slick à la recherche plugin jQuery qui joue apparemment nice avec Bootstrap appelé SelectBoxIt (http://gregfranko.com/jquery.selectBoxIt.js/). La chose que j'aime c'est qu'il vous permet de déclencher le natif de sélectionner la zone sur n'importe quel OS vous êtes sur, tout en conservant une cohérence de style (lehttp://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh comment je souhaite Bootstrap fourni cette option!

Le seul inconvénient est qu'il ajoute une couche de complexité dans la solution, et un surcroît de travail pour assurer la compatibilité avec tous les autres plugins comme ils se sont amélioré/corrigé au fil du temps. Je suis également pas sûr de Bootstrap 3 de compatibilité. Mais, cela peut être une bonne solution pour assurer une cohérence entre les navigateurs et les OS.

Answer 3

Je suis sûr que -webkit-appearance:none fait le truc pour Chrome et Safari.

Answer 4

C'est le comportement normal, et elle est causée par le défaut <select> style sous Firefox : vous ne pouvez pas définir d' line-height, alors vous devez jouer sur padding quand vous voulez avoir une personnalisation de l' <select>.

Exemple, avec des résultats sous 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

Answer 5

Nous avons été à l'aide du plugin bootstrap-sélectionnez pour Bootstrap pour dtyling sélectionne. Fonctionne vraiment bien et a beaucoup de fonctions intéressantes supplémentaires. Je peux le recommander à coup sûr.