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

  • Z时代
  • 2024-01-10
  • 分类：问答

这似乎很简单，但我什至找不到任何东西告诉我这是 不可能的 ，更不用说怎么做了。

我有一个使用expanded / multiple selects

的页面，但似乎无法控制选项的高度。他们看起来很贴心。在Firefox中，CSS值option中height和line-

height似乎都收到预期的效果一样，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>

您可以在此处查看它的运行情况。

回答：

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

因此您无法控制缩进量。您可以在Chrome中设置整个选区的填充（就像IE8一样），但看起来确实很奇怪。与IE8不同，您可以单击选择区域中的任何位置以将其打开，即使它具有填充也是如此。

以上是 如何控制Webkit中Option元素的高度？ 的全部内容， 来源链接： utcz.com/qa/419410.html

回到顶部