Ajout de remplissage pour sélectionner des options

Je veux ajouter une sorte d'espace(rembourrage, de marge ou de quoi que ce soit) entre sélectionnez options en html à l'aide de css. J'ai déjà essayé d'utiliser quelque chose comme:

 select option {
     padding:10px
 }

cependant il ne fonctionne pas. J'ai déjà lu que c'est possible de le faire, mais il ne fonctionne pas sous IE. De toute façon, j'aimerais que cela fonctionne dans d'autres navigateurs, même si elle ne fonctionne pas sous IE.

PS: à l'heure actuelle à l'aide de Chrome

JSFiddle exemple

source d'informationauteur DaftDev

  1. 10

    style pour sélectionner l'option est limité à maintenir une cohérence et une cohérence entre toutes les applications dans le système d'exploitation ainsi que le navigateur doivent restreindre le style de certains éléments de base comme dans votre cas, l'option de la balise.

    La restriction dépend d'un navigateur à l'autre, comme le rembourrage et la même marge de tag option fonctionne dans les navigateurs mozilla firefox alors que ça ne fonctionne pas avec google chrome.

    S'il est très nécessaire que vous site web de style de la balise d'option alors je vous suggère d'utiliser certains plugin jQuery (vous pouvez aussi faire une liste déroulante de votre propre, sa simple).

  2. 10

    L'apparition des balises d'option est déterminée par le navigateur dans mon expérience, et souvent pour de bonnes raisons - pensez à comment différemment de l'apparence est sur iOS v chrome et les avantages de cette.

    Vous pouvez exercer un certain contrôle de l'élément select cependant, en utilisant le navigateur préfixé appearance attribut.

    Par exemple:

    select {
    padding: 2px 10px;
    border: 1px solid #979997;

    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;

    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

    Cependant lorsque l'utilisateur clique dessus, ils semblent comme ils le font normalement dans quelque soit le navigateur que vous utilisez.

    Si vous voulez plus de contrôle, votre meilleur pari est, je pense @sumitb.mdi suggestion d'un plugin jquery ou de construire quelque chose de semblable vous-même à partir de zéro.