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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4748875/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 06:15:46  来源:igfitidea点击:

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

htmlcssforms

提问by Ben Saufley

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 optionin heightand line-heightboth 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.

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

You can view it in action here.

您可以在此处查看它的实际效果。

回答by mVChr

This is not possible in Chrome, according to the electric toolbox:

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

Setting padding on an optgroup or option has no effect in Chromeso 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.

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