如何在Webkit中控制Option元素的高度?

Ben*_*ley 12 html css forms

这似乎很简单,但我甚至无法找到的东西告诉我,这不是可能的,更不用说如何做到这一点.

我有一个使用扩展/多个selects 的页面,我似乎无法控制选项的高度.他们看起来很舒服.在Firefox中,optionin heightline-heightboth的CSS值似乎都有所需的效果padding,但在Chrome 8或Safari 5中却没有.我错过了什么?这是我的代码示例.如果有一些我不知道的重要价值,我会投入任何可能影响期权的东西.

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; 
}
Run Code Online (Sandbox Code Playgroud)
<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>
Run Code Online (Sandbox Code Playgroud)

你可以在这里查看它.

mVC*_*Chr 27

根据电动工具箱,这在Chrome中是不可能的:

在optgroup或选项上设置填充对Chrome无效,因此您无法控制缩进量.你可以在Chrome中设置一个整体的填充(就像IE8一样),但它看起来很奇怪.与IE8不同,您可以单击选择中的任意位置以打开它,即使它有填充.

  • @Ben Saufley,选择元素往往不会经常使用,因为它们有点难看,你可以使用单选按钮执行相同的选择,并且通过一些样式,你可以将一组单选按钮/标签变成某些东西它与select元素的工作方式非常相似,同时实际上是skinnable. (4认同)