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 Firefox, 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.
All you have to do is add inline-style in the select tag.
To override a set height in a CSS element, you can simply put this in the inherited element (either in a style block or inline): height: auto; This will override the set value inherited, without statically setting a new one.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With