web-dev-qa-db-fra.com

Ajout d'un rembourrage pour sélectionner les options

Je veux ajouter une sorte d'espace (remplissage, marge ou autre) entre les options de sélection en html en utilisant css. J'ai déjà essayé d'utiliser quelque chose comme:

 select option {
     padding:10px
 }

mais cela n'a pas fonctionné. J'ai déjà lu que cela est possible, mais cela ne fonctionne pas dans IE. Quoi qu'il en soit, j'aimerais que cela fonctionne dans d'autres navigateurs, même si cela ne fonctionne pas dans IE.

PS: utilise actuellement Chrome

exemple JSFiddle

htmlcsscomboboxmarginpadding
16
DaftDev

le style de sélection de l'option est très limité car il permet de maintenir une cohérence et une cohérence entre toutes les applications du système d'exploitation.Le navigateur doit donc restreindre le style de certains éléments de base comme dans votre balise d'option de cas.

La restriction dépend d'un navigateur à l'autre, comme le rembourrage et même la marge de la balise d'option fonctionne dans Mozilla Firefox alors qu'il ne fonctionne pas avec Chrome.

S'il est très nécessaire dans votre site Web de styliser la balise d'option, je vous suggère d'utiliser un plugin jQuery (vous pouvez également créer votre propre liste déroulante, c'est simple).

11
sumitb.mdi

L'apparence des balises d'options est déterminée par le navigateur dans mon expérience et souvent pour une bonne raison - pensez à la façon dont l'apparence est différente sur iOS v chrome et les avantages de cela.

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

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 vous cliquez dessus, ils apparaissent comme ils le font normalement dans le navigateur que vous utilisez.

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

9
Joshua