关于CSS：HTML中的样式下拉列表元素

Styling dropdown element in HTML

嗨，我想在HTML中更接近选项标签的地方更改下拉菜单的样式。在Firefox中，它可以正常工作，但在IE和谷歌浏览器中无法正常工作。

填充仅在Firefox中起作用。背景色在所有浏览器上都可以使用，但是即使在选定的值上，在IE中您也可以看到它。

使用JSFiddle

进行演示

HTML：

1
2
3
4
5
6
7
8

<label for="locale">locale:*</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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

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