html - HTML 中的样式下拉元素

Question

您好，我想更改 HTML 中靠近选项标签的下拉菜单的样式。在 Firefox 中它可以工作，但在 IE 和谷歌浏览器中不能正常工作。

填充仅在 firefox 中有效。背景颜色适用于所有浏览器，但在 IE 中您可以看到它，即使在选定值上也是如此。

Demo with JSFiddle

HTML:

<label for="locale">locale:<em>*</em></label>
<select name="locale" id="locale">
    <option selected="selected">en_CA</option>
    <option>en_US</option>
    <option>fr_FR</option>
    <option>fr_CA</option>
    <option>ja_JP</option>
</select><br />

CSS:

label{
    margin: 5px 0px 10px 0px;
    padding: 5px;
    height: 22px;
    display: inline-block;
    width: 100px;
}

label em{
    color: red;
    font-family: Arial;
    font-weight: bold;
}

select{
    color: #333;
    margin: 5px 0px 10px -5px;
    padding: 5px;
    height: 32px;
    width: 262px;
    border: #999 1px solid;
}

select option {
    padding: 5px 8px;
    background: #ddd;
}

Answer 1

Webkit 浏览器(Safari、Chrome 等)不允许在 select 元素上填充。但是，您可以通过操纵顶部和底部填充的高度以及左侧填充的文本缩进来模拟填充。

更新:option 元素的背景色也是如此。 Webkit 不允许这样做，而且我认为除了使用无序列表和一些样式等您自己的 Javascript 实现下拉列表之外，没有其他解决方法。