FF select 选中的option样式丢失

时间：2010-03-10 来源：linxpeng

在Firefox的<select>里,当前选中的option的Style是不会被使用的,而是使用select的Style,这里IE里却能正常显示.

解决方法: 利用option的Style在下拉列表里的优先显示这一点,为每个option加上需要的Style,并监听Select的onchange和onblur事件,动态调整select的Style.

运行下代码可看到效果

<select id="s-not-right">
    <option>xb</option>
    <option style="color: green;">1</option>
    <option>2</option>
    <option style="color: red;">3</option>
    <option>4</option>
</select>
<select id="s">
    <option style="color: green;">xb</option>
    <option style="color: green;">1</option>
    <option style="color: black;">2</option>
    <option style="color: red;">3</option>
    <option style="color: black;">4</option>
</select>
<script type="text/javascript">
    if (!document.all) { // fix bug in FF
        var s = document.getElementById("s");
        s.onchange = s.onblur = function() {
            this.style.color=this.options[this.selectedIndex].style.color;
        }
        s.style.color=s.options[s.selectedIndex].style.color;
    }
</script>