有没有办法通过 CSS 为选择选项添加填充？

Posted 2023-03-06

【中文标题】有没有办法通过 CSS 为选择选项添加填充？

【英文标题】：Is there any way to add padding to select options via CSS?

【发布时间】：2013-06-15 17:22:51

【问题描述】：

我想使用 CSS 在 html 中的选择选项之间添加某种空间（填充、边距或其他）。我目前正在使用 Chrome，并且我已经尝试过使用这样的东西：

 select option 
     padding: 10px
 

但是没有用。我已经读过这是可以做到的，但它在 IE 中不起作用。

无论如何，我希望它可以在其他浏览器中运行，即使它在 IE 中不起作用。

JSFiddle example

【问题讨论】：

请制作小提琴或粘贴您的html代码

显示你的 html 而不仅仅是你的 css

抱歉，忘记添加小提琴

你试过<optgroup>吗？

不，我不明白这对样式选择有何帮助。

【参考方案1】：

为了保持操作系统中所有应用程序之间的连贯性和一致性，选择选项的样式非常有限，因此浏览器应该限制一些基本元素的样式，例如您的 case option 标签。

限制取决于浏览器到浏览器，例如选项标签的填充甚至边距在 Mozilla Firefox 中有效，而在 Chrome 中无效。

如果你的网站非常需要设置选项标签的样式，那么我建议你使用一些 jQuery 插件（你也可以自己做一个下拉，很简单）。

【讨论】：

讲你自己的下拉，这就是我们不闪的原因。有一个词“语义”。

请记住，当您使用自己的控件时，您将无法获得浏览器自动填充和其他辅助功能 - 例如地址。例如，即使在这个问题之后 6 年，他们还没有弄清楚如何让角度材料设计控件与 chrome 中的自动填充一起使用:-(

【参考方案2】：

根据我的经验，选项标签的外观是由浏览器决定的，而且通常是有充分理由的 - 想想 ios v chrome 上的外观有多么不同以及这样做的好处。

但是，您可以通过使用浏览器前缀 appearance 属性来对选择元素施加一些控制。

例如：

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;

但是，当单击时，它们会在您使用的任何浏览器中正常显示。

如果您想要更好的控制，我认为您最好的选择是 @sumitb.mdi 建议的 jquery plugin 或自己从头开始构建类似的东西。

【参考方案3】：

<select></select> 标签：- 更改了 select css 属性，但如果您想更改其选项属性，则未更改其选项值属性，因此添加 jQuery 插件，否则创建自己的下拉菜单（自定义下拉菜单）。