如何在html下拉列表中添加填充？

Question

我想在html“select”标签的选项中添加填充。

我尝试将它添加到“select”和“option”的样式属性中，但它在IE中不起作用。

我该怎么办？

Answer 1

好吧，我讨厌整个20世纪90年代的声音，但是只是预先选择一个空格来选择文字可以接受你想要的目标吗？

Answer 2

很难在浏览器的下拉框中设置样式。要获得任何控制，您需要使用JavaScript编写替换控件。但请注意：

• 请记住，用户可能难以使用您的下拉菜单 - 考虑到可用性
• 用JS替换select元素 - 这是一个可访问性问题（并且还允许没有JS支持的用户使用表单输入）

Answer 3

以下作品，在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;}

宽度是为了在显示的select框中留出足够的空间，当未激活时，边距执行它始终执行的操作，text-indent用于在选择框的左边界之间填充填充和内心文本。 line-height只是允许垂直间距。

我不能评论它在IE中的使用，我担心，所以如果有人能反馈 - 或者适应 - 那就是好的。

值得注意的是，无论出于何种原因，select（select *）的下拉部分对我来说不会受到影响，所以如果这是你想回答的问题，我为提供而道歉没什么新鲜的。

演示： http://davidrhysthomas.co.uk/so/select-styling.html

Answer 4

为SELECT

创建一个类

.listBox{
   width: 200px; 
   ...etc
}

现在为SELECT

的选项定义Css

 .listBox option{
     padding:4px;
    ...etc
  }

在IE 10上测试

Answer 5

CSS：

option{
 padding: 0.5em;
}

Answer 6

由于某种原因，我无法使用填充或间距。我选择了一个类似于jQuery的解决方案：

$(document).click(function(){  
  $('#selector option').each(function(){  
    $(this).html("  "+$(this).text());  
  });  
});