セレクトボックスのスタイルについて

質問

http://www.lockon.co.jp/blog/javascript/post_7.html

上記のようなセレクトボックスの中身が変わるセレクトボックスで、
常に右のセレクトボックスの上から３番目までの背景色を固定にしたいのですが、どのようにすればいいかわからずにおります。
どなたかご教授ください。

回答No.2

fujillin · ベストアンサー

セレクトボックスの各オプションにスタイル指定することで可能みたいです。
変更が起きてリストを移動後に、セレクトボックス全体を舐めて、スタイルを設定し直せばよろしいかと…

対象のセレクト要素をselとすれば
for (i = 0; i < sel.length; i++) sel.options[i].className = i<3?'colored':'';

で、CSSで
.colored { background-color:red; }

みたいにしておくことでできました。
直接、.style.backgroundColorを指定しても同じことですね。
あと、初期設定はよしなに。

回答No.3

yambejp

firefox,opera,safari,chromeなどモダンブラウザならCSSのみでいけます。
IEはおかしいのでbehaviorで処理します。
ネスケはめんどうなので放置。

<style>
option:nth-child(-n+3){
background-Color:blue;
}
option{
behavior:expression(
this.style.backgroundColor=this.index<3?"blue":"inherit"
);
}
</style>

<select size="5">
<option>1
<option>2
<option>3
<option>4
<option>5
</select>

補足

ご回答ありがとうございます。
上記をためしてみたのですが、
ieでエラーが返ってブラウザがとまってしまいました。

回答No.1

askaaska

<OPTION>に対し、背景色を設定するのよ。
indexが3つ目までと3つ目以降で
書き換えてあげれば良いわね。

参考ページのロジックを書き換えるなら
fm[sel2].length<3
のときに背景色を設定してあげれば良いわ。