Question

以下代码在除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
        });
    }
});

Answer 1

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

相反，试试这个：

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

Answer 2

我认为除非你使用像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正在为您提供任何有用的错误消息。

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

2 个答案: