24

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

 select option {
     padding: 10px
 }

然而它没有用。我已经读过这是可能的，但它在 IE 中不起作用。

无论如何，我想让它在其他浏览器中工作，即使它在 IE 中不起作用。

JSFiddle 示例

4

3 回答 3

17

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

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

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

于 2013-06-19T10:25:53.577 回答
11

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

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

例如：

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 插件或自己从头开始构建类似的东西。

于 2014-05-28T08:54:09.137 回答
0

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

于 2021-09-30T13:42:51.513 回答