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

【问题标题】：How can I control the height of an Option element in Webkit?如何控制 Webkit 中 Option 元素的高度？
【发布时间】：2011-06-12 13:01:10
【问题描述】：

这看起来很简单，但我什至找不到任何东西告诉我它不可能可能，更不用说如何去做了。

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

【问题讨论】：

我不是 100% 确定，但我认为这在 Chrome 中可能是不可能的。 select 元素（当然还有它的子 option 元素）受底层操作系统而非浏览器的控制。它在其他浏览器中完全有效，这让我感到惊讶。您可以使用样式化且受 JavaScript 控制的 ul（或 ol）来实现样式化的 select-type 元素。
我可以在 Chrome 中设置 select 元素的样式，并在其中添加 padding 等。
我总是忘记'Enter'提交评论。无论如何，我已经考虑过ul 路线，但当select 做得非常好时，它似乎没有必要，除了把所有东西塞得太近。我试图弄清楚为什么它并不总是看起来很拥挤 - 如果有更远的层次结构导致了这种情况，或者是什么。

标签： html css forms

【解决方案1】：

根据the electric toolbox，这在 Chrome 中是不可能的：

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

【讨论】：

@Ben Saufley，如果您想要自定义表单控件，您需要： 1. 自己滚动，b。使用预先构建的库，iii。只使用默认值。
@zzzzBov - 我听说了。虽然我几乎可以在不涉及 JS 的情况下做我需要做的所有事情。这是我希望简单解决的一个小美学问题。
@Ben Saufley，Select 元素往往不经常使用，因为它们有点难看，您可以使用单选按钮执行相同的选择，并且通过一点样式您可以将将单选按钮/标签设置为与选择元素非常相似的东西，但实际上是可换肤的。
@zzzzBov 我没有想到这一点。这是一个有趣的想法。谢谢！
我几乎不赞成这个，因为不支持选项元素的样式是多么愚蠢。尽管这是个坏消息，但感谢您通知我们。现在我需要制作一个完全独立的控件来处理我在 AngularJS 中尝试做的事情，这样我就可以设置它的样式。无论如何...+1！