web-dev-qa-db-fra.com

La liste déroulante de Bootstrap 3 Styled Select semble laide dans Firefox sous OS X

Lorsque vous stylisez un élément de formulaire <select> dans Bootstrap 3, il restitue un mauvais bouton sur Firefox dans OS X:

Ugly select in Firefox on OS X

( http://bootply.com/98385 )

Cela semble être un problème connu depuis un certain temps, et il existe un certain nombre de piratages et de solutions de contournement, dont aucun n'est très propre ( https://github.com/twbs/bootstrap/issues/765 ). Je me demande si quelqu'un a trouvé une bonne solution à ce problème, autre que l'utilisation de listes déroulantes Bootstrap ou de plug-ins supplémentaires. J'ai délibérément choisi d'utiliser le code HTML <select> plutôt que les menus déroulants Bootstrap, car la facilité d'utilisation est meilleure avec les longues listes sur les appareils mobiles.

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

Détails: Mac OS X 10.9, Firefox 25.0.1} _

Mise à jour du 12/4/13: J'ai comparé côte à côte la manière dont chaque navigateur affiche le <select> sous OS X 10.9 avec Firefox, Chrome et Safari, en réponse à @zessx (avec http: //bootply.com/98425 ). De toute évidence, il existe une grande différence entre la manière dont l'élément de formulaire <select> est rendu par les navigateurs et les systèmes d'exploitation:

Each browser renders the select element quite differently

Je comprends qu'une balise <select> est gérée différemment en fonction du système d'exploitation que vous utilisez, car il existe des contrôles natifs basés sur le système d'exploitation qui dictent le style et le comportement. Mais qu'est-ce qui cause class="form-control" dans Bootstrap qui fait qu'un élément de formulaire <select> a un aspect différent dans Firefox? Pourquoi le code par défaut, <select>, sans style, dans Firefox, est-il correct, mais une fois stylé, il est moche?

csstwitter-bootstraptwitter-bootstrap-3
69
bhall

Vous pouvez réellement changer la case grise autour de la flèche déroulante dans IE:

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

enter image description here

27
jzm

En réalité, vous pouvez presque tout faire avec un champ déroulant, et il aura la même apparence sur tous les navigateurs. Regardez 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/

23
rafx

S'appuyant sur les excellentes réponses de rafx et Sina, voici un extrait de code qui ne cible que Firefox et remplace le bouton par défaut par un down-caret copié à partir du thème de l'icône de Bootstrap.

Avant:

 default select

Après:

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

(Le SVG en ligne comporte des barres obliques inverses et des retours à la ligne pour la lisibilité. Supprimez-les s'ils causent des problèmes dans votre pipeline d'actifs.)

Voici le JSFiddle

19
Tobia

Il y a un plugin jQuery élégant qui joue apparemment Nice avec Bootstrap, appelé SelectBoxIt ( http://gregfranko.com/jquery.selectBoxIt.js/ ). Ce que j’aime, c’est que cela vous permet de déclencher la zone de sélection native sur le système d’exploitation utilisé, tout en maintenant un style cohérent ( http://gregfranko.com/jquery.selectBoxIt.js/#TriggertheNativeSelectBox ). Oh, comment j'aimerais que Bootstrap fournisse cette option!

Le seul inconvénient est que cela ajoute une complexité supplémentaire à la solution et un travail supplémentaire pour assurer la compatibilité avec tous les autres plug-ins à mesure qu'ils sont mis à niveau/corrigés au fil du temps. Je ne suis pas sûr non plus de la compatibilité de Bootstrap 3. Mais cela peut être une bonne solution pour assurer une apparence cohérente à travers les navigateurs et les systèmes d’exploitation.

8
bhall

Je suis sûr que -webkit-appearance:none fait l'affaire pour Chrome et Safari.

EDIT: -moz-appearance: none devrait maintenant fonctionner également sur Firefox.

7
Tim Nguyen

Ceci est le comportement normal, et cela est dû au style par défaut <select> sous Firefox: vous ne pouvez pas définir line-height, vous devez alors jouer sur padding lorsque vous souhaitez avoir un <select> personnalisé.

Exemple, avec les 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

enter image description here

7
zessx

C'est facile. Il vous suffit de mettre dans .form-control ceci:

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

Cela supprimera l'apparence du navigateur et autorisera votre CSS.

2
Ivijan Stefan Stipić

Nous utilisons le plugin bootstrap-select pour Bootstrap pour les sélections de style. Vraiment fonctionne bien et a beaucoup de fonctionnalités supplémentaires intéressantes. Je peux le recommander à coup sûr.

1
aahoogendoorn

J'ai trouvé deux manières possibles de résoudre ce problème spécifique:

  1. Utilisez Choisi

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

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

J'utilise Chosen . Regardez: http://harvesthq.github.io/chosen/

Cela fonctionne sur Firefox, Chrome, IE et Safari avec le même style. Mais pas sur les appareils mobiles.

0
skip2me99

Avec Bootstrap 4+, vous pouvez simplement ajouter la classe custom-select à vos entrées sélectionnées pour supprimer le style spécifique au navigateur et conserver les icônes en forme de flèche.

Documentation Here: Bootstrap 4 Custom Forms Select Menu

0
Braden Heckman