html - 仅在 Firefox 中的透明选择下拉菜单

Question

我有一个带有自定义样式的 SELECT 元素。我使用包含“下拉箭头”的背景图像。你可以在这个 liveweave http://liveweave.com/xcfh0Z中找到我在做什么的例子

当您在 Chrome、Safari、IE 或 Opera 中使用选择框时，一切都按预期工作：选择显示在给定的图像中，如果我单击选择框，我可以看到一个带有白色背景的下拉列表。

但是，Firefox 的行为有所不同。当我单击 Firefox 中的选择框时，它会打开一个带有透明背景的下拉列表。我发现解决此问题的唯一方法是使用

background-color: white

...这会导致我的选择周围出现“不太酷的白色边框”。

有没有人知道如何解决这个问题？

Answer 1

为了使您的背景图像正常工作，您的背景图像必须background-color是<select>透明的。相反，您应该将<option>背景设置为白色，如下所示：

option {
    background-color: white;
}

见演示。