Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I control the height of an Option element in Webkit?

Tags:

html

css

forms

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 selects, 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.

like image 931
Ben Saufley Avatar asked Jan 20 '11 15:01

Ben Saufley


People also ask

How do I change the selection height?

All you have to do is add inline-style in the select tag.

How do you override height in CSS?

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.


1 Answers

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.

like image 146
mVChr Avatar answered Sep 21 '22 13:09

mVChr