HTML 选择框：在 IE 中结合背景图像和背景颜色答案

【问题标题】：HTML select boxes: combining background image with background color in IEHTML 选择框：在 IE 中结合背景图像和背景颜色
【发布时间】：2011-12-14 13:58:24
【问题描述】：

        select {
            border: none;
            -moz-appearance: none;
            -webkit-appearance: none;
            appearance: none;
            background: url('/drop.png') no-repeat;
        }
        option {
            background-color:#13814F;

        }

相对简单的问题——在上面的例子中，每个选项（包括被选中的）的背景颜色都与选择框的背景图像重叠。图片的透明度不是问题。

附带说明一下，使用 jquery 设置选择框样式的最现代或最易于使用的插件是什么？我试图不这样做，但慢慢失去了耐心。

【问题讨论】：

so set option{background:transparent} 但你会想要使用 JavaScript 解决方案来实现跨浏览器；每个引擎都以不同的方式呈现它们，而且它们很难修复。

标签： html css internet-explorer select option

【解决方案1】：

根据http://msdn.microsoft.com/en-us/library/ms535877%28v=VS.85%29.aspx，你想用 CSS 做的事情不能在 IE 中完成。它声明了选项元素：

“除了背景颜色和颜色，通过样式对象为选项元素应用的样式设置将被忽略。此外，直接应用于单个选项的样式设置会覆盖应用于整个包含 SELECT 元素的样式设置。”

【讨论】：

【解决方案2】：

试试jqtransform 插件。该演示显示了一个带有渐变背景图像的选择字段，而选项为纯色。

【讨论】：