无法使选择元素上的 rgba() 背景颜色在 Chrome 中工作答案

【问题标题】：Can't make rgba() background-colour on select element work in Chrome无法使选择元素上的 rgba() 背景颜色在 Chrome 中工作
【发布时间】：2012-02-06 22:11:57
【问题描述】：

Chrome 版本 16.0.912.75 m 在 Vista 上运行。

我正在尝试将 rgba 背景颜色应用于禁用的选择元素，不透明度为 0.2。

它在 Firefox 和 Opera 中运行良好，但 Chrome 会忽略不透明度，只显示纯色。我已经尝试添加 -webkit-appearance: none。这修复了 alpha 值，但从视图中删除了选择元素的按钮部分。

有谁知道如何让背景具有 alpha 值，并且不隐藏 select 的按钮部分？

http://jsfiddle.net/EMSmZ/9/

还是不行，提交了一个bug报告：http://code.google.com/p/chromium/issues/detail?id=110437

【问题讨论】：

奇怪，刚试过这个，我似乎在两个浏览器中都可以得到不透明度 Chrome: 16.0.912.75 以及......
奇怪的是对的。请问您使用的是哪个操作系统？
我正在使用 OSX。我希望我们谈论的是同一件事：在这个小提琴中，我在 chrome 和 firefox 的按钮后面看到了主体的红色背景：jsfiddle.net/c4urself/N3VMU
如您所见，第二个选择元素是纯黑色背景还是透明灰色背景？
Google Chrome : 16.0.912.63 OS : Windows WebKit : 535.7 我体验了同样的平坦背景效果...很好。

标签： html css google-chrome

【解决方案1】：

我不想告诉你这个问题，但是使用 CSS 设置表单元素的样式只会造成伤害。每个人都使用 Javascript 替换技术来改变表单元素的外观和感觉是有原因的。（基本上除了文本和文本区域）

【讨论】：

没关系，最后我找到了解决办法。换工作：P 我同意，javascript 替换是明智的做法。不过，我正在做的项目被 AJAX 超载了，添加更多的 DOM 更改就像玩 Buckaroo。

【解决方案2】：

在 XP 上的 chrome 16.0.912.75 m 中无法正常工作。如果你给禁用的 'opacity:.2;它改变了整个元素的不透明度。不确定您要达到什么效果，可能会显示一些上下文以帮助提供解决方案。

【讨论】：

我希望sleect上的箭头和边框是不透明的，但是有一个不透明的背景，所以它后面的颜色可以在一定程度上显示出来。这是设计要求。是的，我已经回到了元素的不透明度，但是 Chrome 不允许我使用标准 css 来做我想做的事情有点废话。

【解决方案3】：

我在为客户开发表单时遇到了同样的问题。我最终使用的解决方法是将background-color 设置为我想要使用的任何基础颜色的较轻版本（#faebe7），在这种情况下为红色，而不是使用rgba(255,0,0,0.4)。

【讨论】：

只有当你的元素在白色之上时才会这样（半透明使它更轻）。如果您在多个背景上有多个元素，则此方法不起作用。所以它并没有真正回答如何让 rgba() 颜色表现的问题，因为它完全进入了另一个颜色系统。