1

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

2 回答 2

1

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

相反，试试这个：

this.cssText = this.options[this.selectedIndex].cssText;
于 2013-05-13T15:22:46.973 回答
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 向您提供任何有用的错误消息。

于 2013-05-13T15:55:16.330 回答