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

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:

Bootstrap 3 Style Sélectionnez le menu déroulant semble laid dans Firefox 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>'s 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 le <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 manière dont les <select> élément de formulaire est rendu sur tous les navigateurs et OS:

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

Je comprends qu'un <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-ce class="form-control" dans le Bootstrap qui provoque un <select> élément de formulaire différent dans Firefox? Pourquoi le défaut, de l'onu, de style <select> dans Firefox regarder bien, mais une fois qu'il est en forme, il semble laid?

  • Pour un utilisateur de FireFox, ce qui est normal et pas moche. Bootstrap utilise uniquement les CSS pour mettre en forme et de ne pas utiliser un script pour activer cela, sélectionnez un élément de la liste, je crois que la Fondation n'. Regarde aussi dans IE pour voir ce qui s'y passe. Les différents navigateurs ne pas rendre les éléments de formulaire de la même façon. Chrome semble la meilleure.
  • De FireFox natif sélectionne obtenir floue si vous leur taille, mais voici à quoi ils ressemblent: jsbin.com/amimUhUg/1
  • Merci, Christina. Je pourrais vivre avec ça personnalisé <select> pour Firefox, même si elle est un peu floue. Le seul problème est que dans Chrome et Safari, il ressemble encore à un défaut <select> élément--en d'autres termes, les styles personnalisés ne semblent travailler pour Firefox. (à l'aide de jsbin.com/amimUhUg/1)
  • eh bien, vous pourriez mettre le sélectionner css à l'intérieur d'un webkit seule requête de média (atsign), écran média et (-webkit-min-device-pixel-ratio: 0) { } puis mettez pas sur les styles sélectionnez à l'extérieur de cette, de cette façon, firefox et ie et tous les autres ne sont pas les ramasser. Une fois que vous vous en tenez une bordure sur une sélection, firefox ne fonctionne tout simplement que la première colonne de votre image pour BS3.
  • comme un utilisateur de Firefox, je trouve ces déroulant boutons sur OS X laid comme l'enfer; ils regardent tout droit sortie de windows 95
InformationsquelleAutor bhall | 2013-12-04
  1. 27

    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;
        }

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

    • Ça fonctionne sous IE 9? Il n'est pas de travail pour moi ..ce qui pourrait être le problème ?
    • La question est de IE9. Suivez ce lien: stackoverflow.com/questions/19407332/...
    • Qu'est-ce que avez à faire avec la question à propos de firefox?
    InformationsquelleAutor jzm
  2. 24

    Actuellement vous pouvez pratiquement tout faire avec liste déroulante, et il regarde la même chose sur tous les navigateur, de prendre un coup d'oeil à l'exemple de code 

    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/

    InformationsquelleAutor rafx
  3. 19

    Appuyant sur les excellentes réponses par rafx et Sina, voici un extrait qui ne vise que Firefox et remplace le bouton par défaut avec un accent circonflexe copié à partir de Bootstrap de l'icône de thème.

    Avant:

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

    Après:

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

    @-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;
  }
}

    (La ligne SVG a barres obliques inverses et des retours à la ligne pour plus de lisibilité. Les supprimer si elles causer des problèmes dans votre asset pipeline.)

    Ici est la JSFiddle

    • j'ai choisi cette solution, le meilleur point de vue, je pense
    • Quelle est la meilleure façon de changer la couleur de cet élément svg? Edit: changé la couleur de la flèche de menu déroulant en ajustant la fill valeurs rvb. Merci pour cette réponse @Tobia
    • @-moz-document url-prefix() a cessé de travailler, voir fxsitecompat.com/en-CA/docs/2018/... pour plus de détails. Je vais avoir de la chance avec le remplacement du sélecteur de _:-moz-tree-row(hover), select.form-control mais je ne comprends pas comment il fonctionne encore.
    • On pourrait penser que, maintenant, les fournisseurs de navigateur serait de comprendre que, parfois, vous avez besoin de cibler des plates-formes ou les moteurs... mais non, ils refusent d'ajouter quelque chose comme @browser (engine="Gecko") { ... } de CSS, de la "pureté" des raisons. Meh.
    InformationsquelleAutor Tobia
  4. 8

    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 (http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox). Oh comment je souhaite Bootstrap fourni cette option!

    Le seul inconvénient c'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 OS.

    • Ouais, c'est SYMPA.
    • L'original de la question posée pour savoir comment faire cela sans plugins supplémentaires.
    • La question était de savoir éviter les plugins
    InformationsquelleAutor bhall
  5. 7

    C'est le comportement normal, et elle est causée par le défaut <select> style sous Firefox : vous ne pouvez pas définir de line-height, alors vous devez jouer sur padding quand vous voulez avoir un personnalisé <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

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

    • Merci @zessx pour la réponse! Sur Windows, <select> est apparemment rendu avec seulement de légères différences entre les navigateurs. Je pourrais vivre avec ça; toutefois, sur OS X, la différence entre un défaut <select> dans Firefox et un Bootstrap ou personnalisées <select> est énorme. Le gris, aspect plat bouton Firefox sur mac OS X pour le droit de l'sélectionnez options n'est tout simplement pas acceptable pour ce projet. Chaque pixel questions. Je me rends compte que les utilisateurs de Firefox OS X peut représenter qu'un faible pourcentage de l'auditoire; cependant, j'ai besoin d'une solution qui a une apparence uniforme dans tous les navigateurs et systèmes d'exploitation.
    InformationsquelleAutor zessx
  6. 7

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

    EDIT : -moz-appearance: none devrait maintenant fonctionner aussi bien sur Firefox.

    InformationsquelleAutor Tim Nguyen
  7. 2

    C'est facile. Vous avez juste besoin de mettre à l'intérieur de .form-control ce:

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

    Cela permettra d'éliminer le navigateur de l'apparence et de permettre à votre CSS.

    InformationsquelleAutor Ivijan Stefan Stipić
  8. 1

    J'ai trouvé deux façons de résoudre ce problème spécifique:

    1. Utilisation Choisi

    2. Cible les navigateurs mozilla à l'aide de @-moz-document url-prefix() comme suit:

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

    Nous avons été en utilisant le 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.

    • Avez-vous l'utiliser avec Bootstrap 3? Pouvez-vous recommander quelque chose pour la version 3?
    • Fonctionne très bien avec BS3.
    • Pour l'intégrer à la Braise, je vous suggère de regarder npmjs.com/package/ember-cli-select-picker
    InformationsquelleAutor aahoogendoorn
  10. 0

    Je suis en utilisant Choisi.
    Regardez: http://harvesthq.github.io/chosen/

    Il fonctionne sur Firefox, Chrome, IE et Safari avec le même style. Mais pas sur les Appareils Mobiles.

    • Le post original spécifiquement dit qu'il ne voulait pas des plugins supplémentaires
    • C'est drôle que la plupart des upvoted réponse aussi est un plugin suggestion
    InformationsquelleAutor skip2me99
  11. 0

    Avec Bootstrap 4+, vous pouvez simplement ajouter la classe custom-select pour vos sélectionner les entrées à abandonner le navigateur de style et de garder les icônes de flèche.

    Documentation Ici: Bootstrap 4 Formulaires Personnalisés, Sélectionnez Menu

    InformationsquelleAutor Braden Heckman
  12. -2

    Vous pouvez utiliser jquery.choisi ou bootstrap-sélectionnez cette option pour ajouter du style à vos boutons.À la fois de l'excellent travail. Mise en garde pour l'Utilisation Choisie ou bootstrap-sélectionnez: ils se cachent tous les deux à l'origine de sélectionner et d'ajouter dans leur propre div avec son propre code. Si vous êtes à l'aide de jquery.valider avec, par exemple, il l'habitude de trouver l'original, sélectionnez à faire de sa validation, car il a été renommé.

    InformationsquelleAutor user2729502