Html 添加填充以选择选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17186777/
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
Adding padding to select options
提问by Jo?o C
I want to add some kind of space(padding, margin or whatever) between select options in html using css. I've already tried using something like:
我想使用 css 在 html 中的选择选项之间添加某种空间（填充、边距或其他）。我已经尝试过使用类似的东西：
select option {
padding:10px
}
however it didn't work. I've already read that this is possible to do but it does not work in IE. Anyway, i'd like to have this to work in other browsers even if it doesn't work in IE.
但是它没有用。我已经读到这是可能的，但它在 IE 中不起作用。无论如何，我想让它在其他浏览器中工作，即使它在 IE 中不起作用。
PS: currently using Chrome
PS：目前使用Chrome
采纳答案by sumitb.mdi
styling to select option is very much limited as to maintain a coherence and consistency among all the application in the operating system thus the browser are ought to restrict the style of some basic elements like in your case option tag.
选择选项的样式非常有限，以保持操作系统中所有应用程序之间的连贯性和一致性，因此浏览器应该限制一些基本元素的样式，例如您的案例选项标签。
The restriction depends browser to browser, like padding and even margin of option tag works in the mozilla firefox while it doesn't works with chrome.
限制取决于浏览器之间的浏览器，例如填充甚至选项标签的边距在 mozilla firefox 中有效，而它不适用于 chrome。
If it is very much necessary in you website to style the option tag then I suggest you to use some jQuery plugin (you can also make a drop down of your own, its simple).
如果您的网站非常需要设置选项标签的样式，那么我建议您使用一些 jQuery 插件（您也可以自己制作一个下拉菜单，很简单）。
回答by Joshua
The appearance of option tags is determined by the browser in my experience and often for good reason - think about how differently the appearance is on iOS v chrome and the benefits of this.
根据我的经验，选项标签的外观由浏览器决定，并且通常有充分的理由 - 考虑一下 iOS v chrome 上的外观有何不同以及由此带来的好处。
You can exert some control of the select element however, by using the browser prefixed appearanceattribute.
但是，您可以通过使用浏览器前缀appearance属性对 select 元素施加一些控制。
For example:
例如：
select {
padding: 2px 10px;
border: 1px solid #979997;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
However when clicked, they appear as they normally do in whatever browser you're using.
但是，当单击它们时，它们会像通常在您使用的任何浏览器中一样显示。
If you want finer control, your best bet I think is @sumitb.mdi's suggestion of a jquery pluginor build something similar yourself from scratch.
如果你想要更好的控制，我认为你最好的选择是 @sumitb.mdi 建议使用jquery 插件或从头开始构建类似的东西。
