2013-05-13 2 views
1

Следующий код отлично работает в любом другом браузере, кроме Internet Explorer 9. Цветной прозрачный CSS не работает.Прозрачный цвет не работает в Internet Explorer

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 
     }); 
    } 
}); 
+0

Какой режим документа вы просматриваете в IE? Каков тип doctype, который вы используете? – teewuane

+0

Я использую веб-форму ASP.NET – Singh

+0

Jag, посмотрите на свой html. В начале .aspx или что-то еще .. вы увидите или что-то похожее. Кроме того, вы можете нажать F12 (из окон), чтобы вытащить инструменты разработчика в IE. Вы увидите режим документа и режим браузера. Что это? – teewuane

ответ

1

Я думаю, что вы будете иметь трудное время, пытаясь получить выберите стили меню, чтобы сделать то, что вы хотите, если вы не используете плагин, как JQuery пользовательского Select.

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

Это, как говорится, вместо того, чтобы делать это ...

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

Вы могли бы попробовать это ...

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

Кроме того, если IE дает вам какую-либо ошибку которые будут полезны.

+0

Спасибо за ссылку - это действительно помогло! :) – Singh

1

Он не действует непосредственно изменить атрибут style в IE.

Вместо этого, попробуйте следующее:

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

, я могу сделать цвет текста совпадающим с цветом фона, который дает мне то, что я хочу, но когда раскрывающийся список открыт, пользователь должен уметь видеть, что цвета означают – Singh

Смежные вопросы