1

各オプション要素の色が異なる単純な選択ドロップダウンのあるWebページがあります。展開すると、Firefox (8.0) で色が正常に表示されますが、オプションをクリックしてリストを閉じるとすぐに、色が黒に戻ります。

要約 Web ページを書いているので、色は重要です。

この問題は 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

私が思いついた解決策は、PHP を使用して style="color:$COLOR" 要素を select タグ自体に追加することです。
ページのレンダリング時に現在のステータスが DB に保持されるため、現在アクティブなステータスを確認し、それに応じて $COLOR 変数を設定します。

助けてくれてありがとう。残念なことに、Firefox は IE chrome などのように自動的にレンダリングしません。

于 2012-07-20T12:36:44.670 に答える
0

宣言は、選択したオプションではなく、要素にcolorのみ影響します。option選択したオプションのスタイルは、要素のスタイルによって決まりますselect。select目的の動作を実現するには、JavaScript で要素の色を変更する必要があります。

<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 に答える