htmlのselectで初期データ以外が選択されたら文字色を変える方法

htmlで入力フォームを作成しています。

html
1<select>
2<option value="0" selected>初期値</option>
3<option value="1">値1</option>
4<option value="2">値2</option>
5</select>

このようなケースで、初期値のvalue="0"以外が選択されたときだけ文字を変えたい場合、例えば、CSSで簡単に出来るような、いい方法は無いでしょうか？

css
1option:checked {
2    color: rgb(0,0,0);
3}

例えば、このようにして出来るかなとも思ったのですが、こうすると、選択時に、ドロップリストの中で、選択されている文字色を変える事は出来ますが、入力ボックス内の文字は変わらないので、何かいい方法が無いかなと思っております。

やはりこのようなケースは、jQueryでプログラミングしなければいけないものなのでしょうか？

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。

javascriptでイベントをキャッチしたり、id要素を指定したりしないと難しいかな。。。
cssのみでご希望されている動作を実現したソースは、
僕個人では見たことがないです。

ちなみに、選択時にセレクトボックス内の文字色を変える程度であれば、
jQueryを使わないでも割と単純なjavascriptで実装できます。
※動作未検証ですが、赤色に変わるはずです。

<html> <head> <script> function changeItem(obj){ if( obj.value == 0 ){ obj.style.color = ''; }else{ obj.style.color = '#F00'; } } </script> </head> <body> <select onchange="changeItem(this)" > <option value="0" selected>初期値</option> <option value="1">値1</option> <option value="2">値2</option> </select> </body> </html>

投稿2016/01/13 11:34

編集2016/01/13 11:34