HTML中的样式下拉元素

Question

嗨，我想在HTML中更改下拉列表的样式，更接近选项标签。 在Firefox中它可以正常工作，但在IE和谷歌浏览器中并不合适。

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

用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实现之外还有其他解决方法。

Answer 2

我不认为你可以设置选项标签的样式。 我想我是从某个地方读到的，它基于操作系统或其他东西......