How can I control the height of an Option element in Webkit?
This seems really simple but I can't even find something telling me that it's not possible, let alone how to do it.
I've got a page that uses expanded/multiple select
s, and I can't seem to control the height of the options. They look really snug. In F开发者_如何转开发irefox, CSS values for option
in height
and line-height
both seem to have the desired effect, as does padding
, but not in Chrome 8 or Safari 5. Am I missing something? Here's a sample of my code. I've put in anything that could affect the option in case there's some overriding value that I'm missing.
body, input, select, checkbox {
font-family:'Avenir Lt Std',AppleGothic,'century gothic',Verdana,sans-serif;
font-size: 15px;
font-weight:200;
line-height: 18px;
}
input, select {
color:#4c2a18;
border: 1px solid #cfc8b4;
background-color:#ffffff;
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
margin:0;
}
option {
height: 35px;
padding:5px;
line-height: 35px;
}
<select size="5">
<option value="">This is option 1</option>
<option value="">Option 2</option>
<option value="">Just trying to show how the line height thing works.</option>
</select>
You can view it in action here.
This is not possible in Chrome, according to the electric toolbox:
Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.
精彩评论