Question

这看起来很简单，但我甚至找不到告诉我它不是可能的东西，更不用说怎么做了。

我有一个使用扩展/多个select的页面，我似乎无法控制选项的高度。他们看起来很舒服。在Firefox中，option和height中的line-height的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; 
}

<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>

您可以在行动here中查看。

Answer 1

根据the electric toolbox：

，这在Chrome中无法实现

在optgroup上设置填充或选项在Chrome中无效，所以你无法控制的数量缩进。您可以设置填充在Chrome中作为一个整体的选择（作为你可以使用IE8）但它看起来真的奇怪的。与IE8不同，您可以单击在选择的任何地方甚至打开它如果它有填充。

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

1 个答案: