展开后，Firefox选择元素背景颜色显示在选项周围

Question

所以我正在建立一个网站，客户希望以某种方式设计select元素。这也意味着在选择元素上设置background-color。

我想要的

打开后，我希望select元素可以自然显示。

问题

据我所知，您无法定位已打开的select元素以对其进行样式设置。因此，我尝试通过将<options>设置为白色背景来删除背景。这样做有效，但在选项上方和下方（在FF和IE上）都留下了原始的浅蓝色背景：

到目前为止已尝试

• 我尝试从元素中删除所有CSS（填充，边距，边框），只保留了背景位。

• 我有-moz-appearance: none;

• 尝试使用select:hover:focus { background: white }打开时以select为目标，这种方法行之有效，但在选择了某些东西之后，也会使select元素变成白色，直到用户将指针从其移出，然后它改变颜色-对我来说很奇怪。

• 试图使选项的字体大小变大，但没有成功。字体大小在Chrome和移动设备上都是正常的。

我现在看到的唯一解决方案是将选择元素保留为白色。 当前操作系统：OSX。在某些IE版本中也可以重现，但我对此并不十分在意。

删除一些代码以防万一

select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: 3px;
border: 0;
background-color: #29c3e5;
color: #003366;
margin: 0;
padding: 13px 32px 13px 17px;

option {
    background-color: white;
}
}