Question

我有以下下拉菜单，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会将背景显示为白色，就像在其他浏览器中一样？

修改我的目标是在select的背景中显示图像。除Chrome之外，每个浏览器都会正常显示该图片。

Answer 1

根据this和this，Chrome中的错误应该是固定的。

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

Answer 2

为什么使用背景色：透明;为“选择”？如果您删除该Chrome工作。

你有什么影响？也许是一些演示？

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

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

3 个答案: