Question

我想设置select标签内的所有选项。我的标记是这样的

<select>
    <option>Milk</option>
    <option>Eggs</option>
    <option>Lettuce</option>
    <option>Tomatoes</option>
    <option>Cream of chicken soup</option>
    <option>Butter</option>
</select>

现在我想为所有选项添加填充，并且还希望在单击选择时可以看到所有选项时更改框的边框颜色。那我该怎么办呢？我试过了

select option {
padding: 20px 0px;
}

但它根本不起作用。谁能告诉我如何解决这个问题？任何帮助和建议都会非常明显。感谢

小提琴链接是here

Answer 1

Webkit Browsers do not support styling of option element。

在optgroup或选项上设置填充对Chrome无效，因此您无法控制缩进量。你可以在Chrome中设置一个整体的填充（就像IE8一样），但它看起来很奇怪。与IE8不同，您可以单击选择中的任意位置以打开它，即使它有填充。

您应该使用ul li元素或使用select2，chosen等jquery插件。

Answer 2

使用以下内容，仅适用于 Firefox ，但不适用于 Chrome

select option {
    padding:20px 30px;
}

Example

你无法使用CSS（至少目前）设计你想要的样式。我已经回答了这个问题。 How to change colour of blue highlight on select box dropdown

你几乎没有选择：

是将select转换为ul, li类型的选择，并使用此功能执行任何操作。
使用Choosen，Select2或jQuery Form Styler等库。这些允许您以更广泛和跨浏览器的方式进行样式化。

将填充添加到选择选项并更改边框颜色

2 个答案: