javascript 将行高放在选择框中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6939755/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
putting line-height in select box
提问by Kimberly Mullins
how is putting line-height: 40px;for optionin select box?
如何把line-height: 40px;用于option在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>
回答by Sparkup
Try this :
试试这个 ：
.select_box{font-size:12px;padding:14px;}
Demo : http://jsfiddle.net/dk9p2/
演示：http: //jsfiddle.net/dk9p2/
Or you can change the font-size:
或者您可以更改字体大小：
.select_box{font-size:30px;}
More options here.
更多选择在这里。
NoteIt all depends on the browser. The previous doesn't work in < ie8
注意这一切都取决于浏览器。以前的在 < ie8 中不起作用
UPDATE :Little more can be achieved through css alone : http://jsfiddle.net/dk9p2/1/
更新：仅通过 css 可以实现更多功能：http: //jsfiddle.net/dk9p2/1/
回答by Boz
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.
不可能以这种方式更改选择列表。您可以添加填充，但它在各种浏览器中都不可靠。要可靠地改变选择列表的外观和感觉，您需要使用 javascript。
Here is one method : http://www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
这是一种方法：http: //www.filamentgroup.com/lab/jquery_ui_selectmenu_an_aria_accessible_plugin_for_styling_a_html_select/
回答by Eduardo Linares
<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>