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>
3 Answers
Reset to default 1It 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/