jquery - 向选择选项添加填充并更改边框颜色

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;
}

但它根本不起作用。有人可以告诉我如何解决这个问题吗？任何帮助和建议都将非常感激。谢谢

fiddle 链接是 here

Answer 1

Webkit Browsers do not support styling of option element .

Setting padding on an optgroup or option has no effect in Chrome so you cannot control the amount of indentation. You can set the padding of a select as a whole in Chrome (as you can with IE8) but it looks really weird. Unlike IE8 you can click anywhere in the select to open it even if it has padding.

您应该使用 ul li 元素或使用像 select2 这样的 jquery 插件, chosen .