为什么设置为透明时，Chrome 中的 html 选择背景颜色为黑色？答案

【问题标题】：Why is the html select background-color black in Chrome when set to transparent?为什么设置为透明时，Chrome 中的 html 选择背景颜色为黑色？
【发布时间】：2010-11-25 18:06:40
【问题描述】：

我有以下下拉菜单，背景在 Chrome 中看起来是黑色的，但在 Windows/Linux/Mac 上的 Firefox/IE/Safari 上是白色的。我正在使用所有这些浏览器的最新版本。

<style>
select {
    background-color: transparent;
    background-image: url(http://sstatic.net/so/img/logo.png);
}
</style>
<select>
    <option>Serverfault</option>
    <option>Stackoverflow</option>
    <option>Superuser</option>
</select>

有谁知道我如何设置上面的样式，以便在将颜色设置为透明时，Chrome 将背景显示为白色，就像在其他浏览器中一样？

编辑： 我的目标是在选择的背景中显示图像。该图像在除 Chrome 之外的所有浏览器中都能正常显示。

【问题讨论】：

样式化复杂组件（如 select 等）总是很复杂，因为标准的 html 和 css 确实无法表达这样的模板。

标签： css google-chrome

【解决方案1】：

为什么要使用 background-color: transparent;为“选择”？如果您删除该 chrome 作品。

你追求的效果是什么？也许是一些演示？

【讨论】：

他可能在“选择”后面有一个背景图片。

【解决方案2】：

根据this和this，这是Chrome中的一个bug，应该修复。

该错误出现在 2.0 版中。我刚刚在 3.0-beta 中对其进行了测试，并且已修复。

【讨论】：

我也在寻找那个错误，664 与我的问题有关。我还刚刚为 mac 和 linux 安装了 Chrome dev，它们是 4.0 并且已经修复。

【解决方案3】：

我在另一个问题中找到的这个答案https://stackoverflow.com/a/5806434/964227 对我来说非常有效。

显然 Chrome 不接受图像作为选择背景。因此，为了使颜色起作用，您必须删除图像然后设置颜色。我将在此处复制并粘贴其他答案。

select {
    background-image: none; /* remove the value that chrome dose not use */
    background-color: #333; /* set the value it does */
    border-radius: 4px;     /* make it look kinda like the background image */
    border: 1px solid #888;
}

【讨论】：