Comment appliquer le style CSS à un Mac Chrome Boîte de sélection?

N'a pas d'importance ce que je fais, à l'aide de Mac OSX 10.9.2 et Chrome Version 33.0.1750.152, padding, background-color, rien ne fonctionne. Je suis vraiment juste de vouloir appliquer un padding-top et padding-bottom de 5px sur un select élément, fonctionne partout de la cept Chrome sur un MAC OSX. Ce qui donne? Comment faire cela à l'échelle mondiale sur toutes les plateformes??

InformationsquelleAutor Solomon Closson | 2014-04-13
  1. 50

    Vous avez besoin d'appliquer -webkit-appearance:none; lors de l'ajout de CSS pour sélectionner des éléments dans les navigateurs webkit.

    DÉMO http://jsfiddle.net/XxkSC/3830/

    • Wow, cela s'applique à tous les autres navigateurs? Ou tout simplement de google Chrome? Je veux dire, ne les autres navigateurs ont un préfixe pour cela aussi?
    • Ok, mais je veux la flèche dans la zone de sélection, mais qui souhaitent tout simplement le rembourrage. -webkit-appearance: none supprime la flèche de la boîte de sélection, mais comment le récupérer?
    • Vous pouvez utiliser une image d'arrière-plan TUTORIEL bavotasan.com/2011/style-select-box-using-only-css
    • Merci, c'est ce que je vais faire!
    • Meilleure réponse est dans ce thread: stackoverflow.com/questions/2966855/...
    InformationsquelleAutor Kevin Lynch
  2. 8

    Il y a une meilleure option pour obtenir un design naturel:

    height:30px;
background:#ffffff;

    DÉMO JSFiddle

    p.s

    Vecteur de réponse est de cacher les flèches sur le côté droit.

    • Oh wow, rembourrage ne fonctionne pas, mais la hauteur et la frontière n'?! Semble très arbitraire..
    InformationsquelleAutor Almog_0
  3. 2

    Ajouter la propriété suivante à votre sélectionnez dans votre fichier css:

    -webkit-appearance:none;
    • Ok, mais je veux la flèche dans la zone de sélection, mais qui souhaitent tout simplement le rembourrage. -webkit-appearance: none supprime la flèche de la boîte de sélection, mais comment le récupérer?
    • répondre à fixer la flèche problème.
    InformationsquelleAutor pconnor88
  4. 1

    Si vous utilisez bootstrap, vous pouvez ajouter une classe custom-select:

    <select class="form-control custom-select">

    Après l'ajout d'elle, vous pouvez éventuellement ajuster la hauteur en ajoutant line-height propriété css:

    select {
    line-height: 1.3;
}

    https://getbootstrap.com/docs/4.1/components/input-group/#custom-select

    InformationsquelleAutor Marko Milivojevic