如何将填充添加到 html 下拉列表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1083652/
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
How can I add padding to html dropdownlist?
提问by Billy
I want to add padding to the options of html "select" tag.
我想在html“select”标签的选项中添加填充。
I try to add it in the style property of "select" and "option" and it doesn't work in IE.
我尝试将它添加到“选择”和“选项”的样式属性中，但在 IE 中不起作用。
What can I do?
我能做什么？
采纳答案by DVK
OK, I hate to sound all 1990s, but would simply pre- and app-ending a space to the option text be acceptable for your desired goals?
好吧，我不想听 1990 年代的所有声音，但是对于您想要的目标，简单地在选项文本前加上一个空格是否可以接受？
回答by alex
It is difficult to style a drop down box cross browser. To get any sort of control, you'll need to code a replacement one in JavaScript. Be warned, however:
很难设置下拉框跨浏览器的样式。要获得任何类型的控制，您需要在 JavaScript 中编写替代代码。但是请注意：
- Remember that the user may have difficulty using your drop down - take usabilty into account
- Replace a select element with JS - this is an accessibility issue (and also allows users without JS support to use the form input)
- 请记住，用户可能难以使用您的下拉菜单 - 考虑可用性
- 用 JS 替换 select 元素 - 这是一个可访问性问题（并且还允许没有 JS 支持的用户使用表单输入）
回答by David says reinstate Monica
The following works, in FF3+ and Midori (and presumably other Webkit browsers):
以下在 FF3+ 和 Midori（可能还有其他 Webkit 浏览器）中有效：
select
{width: 14em;
margin: 0 1em;
text-indent: 1em;
line-height: 2em;}
select * {width: 14em;
padding: 0 1em;
text-indent: 0;
line-height: 2em;}
The width is to allow enough room in the displayed selectbox when not active, the margin does what it always does, text-indentis used to feign padding between the left boundary of the select box and the inner-text. line-heightis just to allow vertical spacing.
宽度是为了select在不活动时在显示的框内留出足够的空间，边距做它一直在做的事情，text-indent用于假装选择框的左边界和内部文本之间的填充。line-height只是为了允许垂直间距。
I can't comment on its use in IE, I'm afraid, so if anyone could feed back -or adapt- to suit that'd be good.
我不能评论它在 IE 中的使用，恐怕，所以如果有人能反馈 - 或适应 - 以适应那会很好。
It's worth noting that the drop-down part of the select (select *) isn't affected outside of FF3 for me, for whatever reason, so if that was the question you wanted answering, I apologise for offering nothing new.
值得注意的是，select *无论出于何种原因，select ( )的下拉部分在FF3 之外对我来说都不会受到影响，所以如果这是您想要回答的问题，我很抱歉没有提供任何新内容。
Demo at: http://davidrhysthomas.co.uk/so/select-styling.html
回答by Exzile
Create a class for the SELECT
为 SELECT 创建一个类
.listBox{
width: 200px;
...etc
}
Now define the Css for the options of the SELECT
现在为 SELECT 的选项定义 Css
.listBox option{
padding:4px;
...etc
}
Tested on IE 10
在 IE 10 上测试
回答by user27147
I couldnt get this to work with padding or spacing for some reason. I went with a jQuery solution that looks like this:
由于某种原因，我无法让它与填充或间距一起使用。我使用了一个看起来像这样的 jQuery 解决方案：
$(document).click(function(){
$('#selector option').each(function(){
$(this).html(" "+$(this).text());
});
});
回答by user27147
CSS:
CSS：
option{
padding: 0.5em;
}
