- ベストアンサー
プルダウンリストの背景色の指定
お世話になります。 現在作成しているwebページがあり、下記のようにプルダウンリストの背景色を設定しております。 <select> <option style="background-color: #FF0000;">サンプル1</option> <option style="background-color: #00FF00;">サンプル2</option> <option style="background-color: #0000FF;">サンプル3</option> <option style="background-color: #FFFFFF;">サンプル4</option> </select> このページにおきまして、サンプル3を選択したときに、プルダウンリストに「サンプル3」と表示され、背景色が#0000FFになるようにしたいのですが、 上記のままだと、IEでは背景色も変化しますが、firefoxですとプルダウンリスト内に「サンプル3」と表示されても背景色は白のままです。 IEとおなじ動きになるようにするには、どうしたらよいでしょうか。 ちなみに、 <select style="background-color: #FF0000"> にすると、IE、firefoxともにプルダウンリストの背景色が変更できたので、javascriptでoptionのvalueをとり、それをselectのstyleに設定できれば。。。 と考えたのですが、javascriptはほぼ無知なので、上記の方法でも解決できずでした。 簡単に解決できる方法などございますでしょうか。 もしくは、javascriptで解決できますでしょうか。 どうぞ宜しくお願いいたします。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
「スタイルシートのクラス名」 <html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function chBackGround(e) { e.className=e.options[e.selectedIndex].className; document.getElementById('submit').focus(); } window.onload = function() { document.getElementById('key').className='color01'; } // --> </script> <style type="text/css"> <!-- .color01 { background-color: #FF0000; } .color02 { background-color: #00FF00; } .color03 { background-color: #0000FF; } .color04 { background-color: #FFFFFF; } --> </style> </head> <body> <form name="f1" action="./DB.cgi" method="POST"> <div> <select id="key" name="key" onchange="chBackGround(this)"> <option class="color01"> サンプル1 </option> <option class="color02"> サンプル2 </option> <option class="color03"> サンプル3 </option> <option class="color04"> サンプル4 </option> </select> </div> <input id="submit" type="submit" value="表示"> <input type="hidden" name="mode" value="display"> </form> </body> </html>
その他の回答 (2)
- auty
- ベストアンサー率58% (284/486)
＞＞＞ <select style="background-color: #FF0000"> ＞＞＞ にすると、IE、firefoxともにプルダウンリストの背景色が変更できた との事なので、これをJavaScriptで書くと ------------------------------------------------------------ <script type="text/javascript"> <!-- var bc = ["#FF0000","#00FF00","#0000FF","#FFFFFF"]; function chBackGround(e) { e.style.backgroundColor=bc[e.selectedIndex]; } window.onload = function() { document.getElementById('key').style.backgroundColor=bc[0]; } // --> </script> ------------------------------------------------------------ また、<select>タグは <select id="key" name="key" onChange="chBackGround(this)"> としてみてください。
お礼
ご回答ありがとうございます。 javascriptに弱い私ですが、正に思っていた動きになりました！ ありがとうございました。 追加質問で大変申し訳ないのですが、 var bc=の部分に、16進数を記載するのではなく、スタイルシートのクラス名を指定することは可能でしょうか。 例えば、 var bc = ["color01","color02","color03","color04"]; とし、<select>タグ部分に <select class="######">（######の部分をcolor01～color04まで、選択した値が入る） こんなイメージです。 お手隙なときにでもご回答いただければと思います。 ひとまず、ありがとうございました！！
- yambejp
- ベストアンサー率51% (3827/7415)
たとえばこんな感じで <script type="text/javascript"> window.onload=function(){ var tags=document.getElementsByTagName("select"); for(var i=0;i<tags.length;i++){ tags[i].style.backgroundColor=tags[i].options[tags[i].selectedIndex].style.backgroundColor; tags[i].onchange=function(){ this.style.backgroundColor=this.options[this.selectedIndex].style.backgroundColor; } } } </script> <select> <option style="background-color: #FF0000;">サンプル1-1</option> <option style="background-color: #00FF00;">サンプル1-2</option> <option style="background-color: #0000FF;">サンプル1-3</option> <option style="background-color: #FFFFFF;">サンプル1-4</option> </select> <select> <option style="background-color: #FF0000;">サンプル2-1</option> <option style="background-color: #00FF00;">サンプル2-2</option> <option style="background-color: #0000FF;">サンプル2-3</option> <option style="background-color: #FFFFFF;">サンプル2-4</option> </select> <select> <option style="background-color: #FF0000;">サンプル3-1</option> <option style="background-color: #00FF00;">サンプル3-2</option> <option style="background-color: #0000FF;">サンプル3-3</option> <option style="background-color: #FFFFFF;">サンプル3-4</option> </select>
お礼
ご回答ありがとうございます。 参考にさせていただきましたが、javascriptに弱い私ではイマイチ理解できず、思うような動きになりませんでした（涙） こちらのソースをもとに、勉強させていただきます。 ありがとうございました。
お礼
度々のご回答ありがとうございます。 やりたいことが実現できました！！ ありがとうございました。