透明颜色在 Internet Explorer 中不起作用答案

【问题标题】：Transparent color not working in Internet Explorer透明颜色在 Internet Explorer 中不起作用
【发布时间】：2013-05-13 15:18:52
【问题描述】：

以下代码在除 Internet Explorer 9 之外的所有其他浏览器中都能完美运行。彩色透明 CSS 不起作用。

HTML：

<select class="selectElement" runat="server" id="dropdown_">
    <option value="N">N</option>
    <option value="G">G</option>
    <option value="O">O</option>
    <option value="A">A</option>
    <option value="R">R</option>
    <option value="U">U</option>
</select>

CSS：

.selectElement {
    height: 50px;
    width: 80px;
    border: solid 1px #c8c8c8;
    color:transparent;   
}

jQuery:

$(document).ready(function () {
    $('select[id^=dropdown]').children().each(function () {
        colors = { "N": "lightgrey", "G": "green", "O": "orange", "A": "yellow", "R": "red", "U": "purple" }
        $(this).attr('style', 'background-color:' + colors[$(this).val()] + ';');
    });
    $('select[id^=dropdown]').change(function () {
        $(this).attr('style', $(this).find('option:selected').attr('style'));
    }).change();
    $('select[id^=dropdown]')
    .mousedown(function () { $(this).css('color', 'black') })
    .blur(function () { SetStyle(this) })
    .change(function () { SetStyle(this) })

    SetStyle('#dropdown'); // So that we style on load

    function SetStyle(obj) {
        var color = $(obj).find('option:selected').css('background-color');
        $(obj).css({
            'color': 'rgba(0,0,0,0)',
            'background-color': color
        });
    }
});

【问题讨论】：

您在 IE 中渲染的文档模式是什么？您使用的文档类型是什么？
我正在使用 ASP.NET 网络表单
Jag，看看你的 html。在 .aspx 或其他 .. 的开头，您会看到或类似的东西。此外，您可以按 F12（从 Windows）拉出 IE 中的开发人员工具。您将在那里看到文档模式和浏览器模式。这是什么？
文档类型。查看 HI_Test_v1._Default。您的 html、head 和 body 标签在哪里.. ... ... ...
好的，现在我明白了：浏览器模式：IE9 文档模式：IE9 标准

标签： jquery html colors html-select

【解决方案1】：

我认为除非你使用像 jQuery Custom Select 这样的插件，否则你将很难让选择菜单样式做你想做的事。

http://adam.co/lab/jquery/customselect/

话虽这么说，而不是这样做......

$(this).attr('style', 'background-color:' + colors[$(this).val()] + ';');

你可以试试这个……

$(this).css({'background-color': colors[$(this).val()]});

此外，如果 IE 向您提供任何有用的错误消息。

【讨论】：

感谢您的链接 - 它真的很有帮助！ :)

【解决方案2】：

在IE中直接更改style属性是无效的。

试试这个：

this.cssText = this.options[this.selectedIndex].cssText;

【讨论】：

我可以使文本颜色与背景颜色相匹配，这给了我我想要的，但是当下拉菜单打开时，用户需要能够看到颜色的含义