HTML中的样式化下拉列表元素

您好，我想更改HTML中靠近选项标记的下拉列表的样式。在Firefox中，它可以正常工作，但在IE和google chrome中不能正常工作

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

Html:

Webkit浏览器（Safari、Chrome等）不允许在

select

元素上填充内容。但是，您可以通过操纵顶部和底部填充的高度以及左侧填充的文本缩进来模拟填充

---

更新：

选项

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

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

height也不起作用。只有在firefox中才没有问题。height在Chrome中对我来说很好（至少在OSX上）。哦，对不起，我问错了。我想设计选项标签的样式，而不是整个下拉列表。设置下拉框的样式没有问题。然后您需要自己实现下拉框。您对选项标记外观的控制级别非常有限。此外，考虑智能手机和平板电脑，它们完全不同的下拉实现。最好不要操纵选择样式，因为你不会得到跨浏览器支持。

<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 />

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