Question

我有一个带有简单选择下拉列表的网页，其中每个选项元素都有不同的颜色。扩展时，Firefox（8.0）中的颜色显示正常，但只要您单击一个选项并且列表关闭，颜色就会变回黑色。

在我撰写摘要网页时，颜色很重要。

这个问题似乎没有出现在IE

中

<select name='STATUS' style='width:100px'>
  <option value='NS' style='color:blue'>Not Started</option>
  <option value='Started' style='color:Green'>Started</option>
  <option value='Finished' style='color:red'>Finished</option>
</select>

Answer 1

color声明仅影响您的option元素，而不影响所选的选项。所选选项的样式由select元素的样式决定。您必须使用JavaScript更改select元素的颜色才能实现所需的行为：

<select class="colorchange" name='STATUS' style='width:100px;'>
  <option value='NS' style='color:blue'>Not Started</option>
  <option value='Started' style='color:Green'>Started</option>
  <option value='Finished' style='color:red'>Finished</option>
</select>

function selectColorChanger(){
    this.style.color = this.options[this.selectedIndex].style.color;
}

// this will affect all selects which have the "colorchange" class applied
var selects = document.getElementsByClassName("colorchange");
var i;

for(i = 0; i < selects.length; ++i){
    selects[i].onchange = selectColorChanger;
}

Demo

Answer 2

我提出的解决方案是使用PHP将一个style =“color：$ COLOR”元素添加到select标签本身。
由于当前状态在呈现页面时保存在数据库中，因此我检查当前处于活动状态并相应地设置$ COLOR var。

感谢您的帮助。羞耻Firefox不会像IE chrome等那样自动呈现它。

选择标记颜色不会在Firefox中显示

2 个答案: