HTML 中的半透明 <Select> 元素答案

【问题标题】：Semi-transparent <Select> element in HTMLHTML 中的半透明 <Select> 元素
【发布时间】：2012-11-09 08:36:54
【问题描述】：

我正在寻找一种在 HTML 中制作半透明表单元素的方法。

我知道 CSS3 有可爱的 background-color:rgba(r,g,b,a) 选项，同样使用半透明 .png 作为背景图像通常也可以，但我无法做到为元素工作。

我主要针对现代浏览器（IE9 和 FF/Chrome/Safari 的更新版本），我对向后兼容的解决方案不太在意（降级为纯色很好）。即使是在其中一些方面有效的解决方案也是可以接受的，特别是如果预计其他浏览器的未来版本会支持它（我正在看你的 IE！）。

【问题讨论】：

因为我已经遇到了这些场景，我发现即使我们使用 CSS3，
你在找这个吗？ jsfiddle.net/23SMa
@irrelephant 我认为这不是一个完美的解决方案，因为 select 元素中可用的文本（不在下拉菜单中）也不够清晰可见.. 只是一个建议朋友......
确实做得相当好，谢谢！编辑：Faizul 是正确的，它也会淡出文本，但总比没有好！

标签： html css transparency

【解决方案1】：

不要使用background-color:rgba，而是使用opacity:x。 IE9、Chrome、FF、Opera 和 Safari 使用它来实现透明度。例如：

<select style="opacity:0.5;">

不透明度取值介于 0（完全透明）和 1 之间。

虽然您主要针对现代浏览器，但对于 IE8 及更早版本，您必须使用 filter:alpha(opacity=50)（关于上面的示例；此处的 opacity 接受 0 到 100 之间的值）。

总之

<select style="opacity:0.5;filter:alpha(opacity=50);">

为您提供现代浏览器以及 IE8 及更早版本支持的半透明选择控件。

使用这种技术，选择子选项也将获得指定的不透明度，因此选项标签的文本也会淡出。
Mikkel Fausing 发现将background-color:rgba(r,g,b,a) 与-webkit-appearance: none; 结合使用不会使文本褪色，但是- 如果应用于选择- 它会删除指示此控件是下拉框的小箭头。例如：

<select style="background-color:rgba(0, 0, 0, 0.2); -webkit-appearance:none;">

【讨论】：

那么stackoverflow.com/questions/806000/ 可以帮助你。
我认为我找到了一个适用于 IE9、FF 和 Chrome 的解决方案（未在 Safari 或 Opera 上测试）。这些技巧似乎是使用 -webkit-appearance:none。我不太确定这是否有问题，例如：jsfiddle.net/mikkelpf/3m3vT
-webkit-appearance:none 会从选择下拉列表中删除你的箭头。不是吗？我已经尝试了几乎所有的解决方案，花了超过 3 天的时间，它使学习很多关于选择，复选框和单选..
你是对的，它也删除了箭头。但是，在当前情况下，这对我来说是可以接受的——即使这样做通常是个坏主意。
@BastiM：设置不透明度也会淡出文本，并且将