如何向 html 下拉列表添加填充？答案

【问题标题】：How can I add padding to html dropdownlist?如何向 html 下拉列表添加填充？
【发布时间】：2009-07-05 08:06:59
【问题描述】：

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

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

我能做什么？

【问题讨论】：

你想做什么？为什么要填充选择选项？
我想在选择选项的左右两边添加一些空间，让它看起来更好。

标签： html css

【解决方案1】：

好的，我讨厌听起来都是 1990 年代，但是对于您想要的目标，是否可以简单地在选项文本前加上一个空格？

【讨论】：

+1 票：这是最好的解决方案，因为 OP 只想在左右两侧添加一些空间，并且如果他不想花几个小时来实现自定义下拉菜单。
请不要那样做。这可以防止通过键入从列表中选择选项。它还破坏了自动填充。这对有可访问性要求的用户来说尤其不利。
另一种适用于所有浏览器的解决方案，将&nbsp; 添加到选择列表检查this 和this 中的第一个选项，希望有所帮助。

【解决方案2】：

很难跨浏览器设置下拉框样式。要获得任何类型的控制，您需要在 JavaScript 中编写一个替代控制。但是请注意：

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

【讨论】：

【解决方案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 *) 的下拉部分对我来说在 FF3 之外都不会受到影响，所以如果这是您想要回答的问题，我很抱歉没有提供任何新内容.

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

【讨论】：

【解决方案4】：

为 SELECT 创建一个类

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

现在为 SELECT 的选项定义 Css

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

在 IE 10 上测试

【讨论】：

【解决方案5】：

CSS：

option{
 padding: 0.5em;
}

【讨论】：

唯一可用的浏览器是 Firefox。 Safari、Chrome 和 Opera 都不会注意到它。

【解决方案6】：

由于某种原因，我无法让它与填充或间距一起使用。我选择了一个看起来像这样的 jQuery 解决方案：

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

【讨论】：