javascript - 的图像在 firefox 中有效，但在其他浏览器中无效

Question

html:

<select size="10" style="width: 325px; background-color: #fff;" class="postCode">
    <option value="36621746_0S_F">6 Upperkirkgate Aberdeen</option>
    <option value="31560744_0S_F">12A Upperkirkgate Aberdeen</option>
    <option value="31560745_0S_F">12B Upperkirkgate Aberdeen</option>
    <option value="36621735_0S_F">36 Upperkirkgate Aberdeen</option>
    <option value="35390362_0S_F">48-58 Upperkirkgate Aberdeen</option>
</select>

CSS:

.postCode {
    background-color: rgba(0, 0, 0, 0);
}
.postCode option
{
    background-color: rgba(0, 0, 0, 0);
    background-image: url('../img/house.png');
    background-repeat: no-repeat;
    background-position: left top;
    text-indent: 2em;
}

---

在 Firefox 中

在 Chrome 中

请帮帮我。

更新: - IE8 在 Chrome 中的结果相同

Answer 1

某些浏览器使用 native 控件实现下拉菜单，并且不允许设置选项样式。如果不能用其他元素的集合和 JavaScript 堆栈替换该元素，您对此无能为力。