最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - putting line-height in select box - Stack Overflow

programmeradmin2浏览0评论

how is putting line-height: 40px; for option in 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>

how is putting line-height: 40px; for option in 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>
Share Improve this question asked Aug 4, 2011 at 10:25 Kimberly MullinsKimberly Mullins 1012 gold badges4 silver badges8 bronze badges
Add a ment  | 

3 Answers 3

Reset to default 1

It is not possible to alter a select list in this way. You can add padding but it is not reliable in various browsers. To alter the look and feel of a select list reliably you will need to use javascript.

Here is one method : http://www.filamentgroup./lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/

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

Try this :

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

Demo : http://jsfiddle/dk9p2/

Or you can change the font-size:

.select_box{font-size:30px;}

More options here.

Note It all depends on the browser. The previous doesn't work in < ie8

UPDATE : Little more can be achieved through css alone : http://jsfiddle/dk9p2/1/

发布评论

评论列表(0)

  1. 暂无评论