1

我有一个带有简单选择下拉列表的网页，其中每个选项元素都有不同的颜色。展开后，颜色在 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>
4

2 回答 2

0

该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;
}

演示

于 2012-07-19T09:00:23.847 回答
0

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

谢谢您的帮助。Shame Firefox 不会像 IE chrome 等那样自动渲染它。

于 2012-07-20T12:36:44.670 回答