mettre la hauteur de la ligne dans la boîte de sélection

comment mettre line-height: 40px; pour option dans select box?

<select class="select_box">
    <option value="" disabled="disabled" style="display: none;">Categories</option>
    <option>10</option>
    <option>25</option>
    <option>50</option>
    <option>100</option>
    <option>all</option>
</select>
InformationsquelleAutor Kimberly Mullins | 2011-08-04
  1. 1

    Essayez ceci :

    .select_box{font-size:12px;padding:14px;}

    Démo : http://jsfiddle.net/dk9p2/

    Ou vous pouvez modifier la taille de police:

    .select_box{font-size:30px;}

    Plus d'options ici.

    Note tout dépend du navigateur. Le précédent ne fonctionne pas dans le < ie8

    Ou avec jQuery : lien

    Mise à JOUR : Peu plus peut être accompli grâce à css seul : http://jsfiddle.net/dk9p2/1/

    • je veux pour l'option pas de select. j'utilise chrome
    • Voulez-vous simplement à masquer la première option? ou de désactiver la totalité <select> tag?
    • non, je veux créer une distance entre <option> balises avec un rembourrage ou la hauteur de la ligne.
    • J'ai mis à jour ma réponse, vous ne pouvez pas le style de personne <option> tags
    InformationsquelleAutor Sparkup
  2. 0

    Il n'est pas possible de modifier une liste de sélection de cette façon. Vous pouvez ajouter rembourrage, mais il n'est pas fiable dans les différents navigateurs. Pour modifier l'apparence d'une liste de sélection de manière fiable, vous aurez besoin d'utiliser le javascript.

    Voici une méthode :
    http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

    • je veux pas utiliser de Plugins
    InformationsquelleAutor Boz
  3. 0

    HTML:

    <html>
 <head>
  <style>
   option {font-size: 40px;}
  </style>
 </head>
 <body>
  <select>
   <option>Internet Explorer 11</option>
   <option>Mozilla Firefox 38.0.5</option>
   <option>Opera 30.0.1835.125</option>
   <option>Google Chrome 43.0.2357.81 dev-m</option>
  </select>
 </body>
</html>

    InformationsquelleAutor Eduardo Linares