- ベストアンサー
プルダウンリストの背景色の指定
お世話になります。 現在作成している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で解決できますでしょうか。 どうぞ宜しくお願いいたします。
- masa_to
- お礼率82% (48/58)
- HTML
- 回答数3
- ありがとう数3
- みんなの回答 （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に弱い私ではイマイチ理解できず、思うような動きになりませんでした（涙） こちらのソースをもとに、勉強させていただきます。 ありがとうございました。
関連するQ&A
- プルダウン 背景色の変更
お世話になっております。 以前こちらで質問させていただき、またつまずいたので質問させてください。 何度も申し訳ございません。 現在、 <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> ------------------------------------------------------------ html部分 <select id="key" name="key" onChange="chBackGround(this)"> <option style="background-color: #FF0000;">サンプル0</option> <option style="background-color: #00FF00;">サンプル1</option> <option style="background-color: #0000FF;">サンプル2</option> <option style="background-color: #FFFFFF;">サンプル3</option> </select> としており、プルダウンで選ばれたカラーのスタイルを<select>タグに埋め込んでおります。 上記だと、この画面を初期表示時、<select>部分に読み込まれるプルダウンの色が、必ずbc[0]（サンプル0の色）になります。 例えば、サンプル2のoptionにselectedが記載されていた場合、画面の初期表示はbc[2]（サンプル2の色）にしたいのですが、この方法をご教授いただけませんでしょうか。 お忙しいところ申し訳ございません。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- プルダウンメニューの背景色を１行ごとに変えたいです
CSSで option.bk_y {background-color:#000000; color: #FFFF00;} option.bu_r {background-color:#0000FF; color: #FF0000;} などとして classで指定するとPCでは実現しますが携帯では反応せず <option value="黒／白" STYLE="background-color:#000000;color:FFFFFF;">黒／白 と記述しても携帯では反応しません。 携帯ではプルダウンメニューの背景色を１行ごとに変える事は無理ですか？ 代わりの方法としてプルダウンメニューに画像をはめ込むとか…あればご教示お願い致します。
- ベストアンサー
- HTML
- プルダウンのコントロールに関して
プルダウンのコントロールに関して 教えて下さい。 今、以下のようなソースを記述し、プルダウン選択で"休み"が選択された場合のみ。 テキスト入力欄を表示させるような仕組みを作成しました。 但し、この場合、Cookie等を使ってデフォルトで前回値を"休み"と選択した場合は 他のものを選択し、さらにもう１度"休み"を選択しないと表示されないかと思われます。 上記のように前回値で立ち上げた際に、既に"休み"が選択された場合でも、切り替えを 行う事なくテキスト入力欄を表示させるような事は可能なのでしょうか？？？ わかりにくい内容で申し訳ありません。 よろしくお願いします。 <script type="text/javascript"> function ChangeSelection(form, selection) { var text_note = form.elements["text_note"]; if (selection.value=="休み" || selection.value=="出張") { text_note.style.display = "block"; }else{ text_note.style.display = "none"; } } </script> </head> <body> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%;display:none;" VALUE="$out_goto"></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </body> </html>
- ベストアンサー
- JavaScript
- リストボックス全選択について
JavaScriptについて質問です。 リストボックスA,B と プルダウンC という画面項目があると仮定し、 submitボタンを押下したとき、 リストボックスA,Bの項目全てが全選択され、プルダウン項目はそのままにしたいと考えております。 下記のソースのように作成したのですが、 リストボックスが全選択されるところまでは良いのですが、 プルダウン項目が最後の項目が選択された状態になってしまいます。 リストボックスだけが全選択され、プルダウン項目はそのままにするにはどうしたら良いでしょうか。 かなり困ってます。 どなたか助けてください。。 以下ソースです。 <html> <head> <script language="JavaScript"> <!-- function selectAll(){ var str = document.getElementsByTagName("option"); for(i=0;i<str.length;i++){ str[i].selected = true; } } //--> </script> </head> <body> <table> <tr> <td> リストA<br> <select name="listboxA" multiple> <option value="サンプル1">サンプル1</option> <option value="サンプル2">サンプル2</option> <option value="サンプル3">サンプル3</option> </select> </td> <td> リストB<br> <select name="listboxB" multiple> <option value="サンプル4">サンプル4</option> <option value="サンプル5">サンプル5</option> <option value="サンプル6">サンプル6</option> </select> </td> <td> プルダウンC<br> <select name="Pdown"> <option value="サンプル7">サンプル7</option> <option value="サンプル8">サンプル8</option> <option value="サンプル9">サンプル9</option> </select> </td> </tr> </table> <br> <input type=submit value="送信" onClick="selectAll()"> </body> </html>
- 締切済み
- JavaScript
- cssで位置指定したテーブル下のプルダウンが見えてしまう問題
cssで位置指定したウィンドウの下にフォームのプルダウンがあると、 プルダウンの部分に穴が開いたような状態になります。 firefox,operaでは起きずIE6で起きます。 何か良い手はないでしょうか。 よろしく、お願いします。 <html> <head> <style> <!-- #poplink {position:absolute;left:0px; top:30px; width:100px; z-index:9;} #poplink table {border-collapse: collapse; background-color: #ffffff;} #poplink td {border: 2px solid #00ffff; } //--> </style> </head> <body> <div id="poplink"> <table width="80px" height="80px"> <tr><td> [<a onClick="PopupOff('poplink')">閉じる</a>]<br /> ポップアップ </td></tr></table> </div> <a href="#" onClick="PopupOn('poplink')">リンク</a><br /> <form> <select> <option>aaaa</option> <option>bbbb</option> </select> </form> </body> </html>
- ベストアンサー
- HTML
- プルダウンの初期値に関して
教えて下さい。 PHPとJavascript、DBはMySWLを使用してプルダウンにて選択した 内容を、別のテキストエリアに表示させるような事をしようとしています。 javascriptで選択されたものを別エリアに表示させ、さらには前回値をテキストエリアに再表示させる事は可能ですが、次に登録しようとした際に、プルダウンを選択していないとせっかく登録した内容がプルダウンの初期値で上書きさせれてしまいます。 何か、テキストにデータが存在した場合には、プルダウンの情報で上書きしないか、そもそもプルダウンの内容を覚えておくような事はできないでしょうか。。。 現在作成している記述です。 print("<TR>\n"); print("<TD NOWRAP><FONT SIZE='3'><B>【行 先】</B></FONT></TD>\n"); print("<TD NOWRAP SIZE='30'><input name='text1' VALUE=$out></input>\n"); print("</TD>\n"); print("<TD><select name='am_note' ONCHANGE='ChangeSelection(this.form, this)'> <option value=' '> <option value='自席' style='background-color:#FFFFFF; color:#3366FF'>自席 </select>\n"); print("</TD>\n"); print("</TR>\n"); よろしくお願いします。
- ベストアンサー
- PHP
- IE6でプルダウンメニューをクリックするとその時に色が変わるようにして
IE6でプルダウンメニューをクリックするとその時に色が変わるようにしていたのですが、 IE8でプルダウンメニューをクリックするとすぐに閉じてしまいます。 2回目のクリックでメニューが表示されます。 これはIEのバグなのでしょうか？ また、他に良い方法あるのでしょうか？ 以下がサンプルソースです。 <HTML> <HEAD> <TITLE>サンプル１</TITLE> </HEAD> <BODY> <CENTER> <FORM name="testForm"> <SELECT onFocus="style.backgroundColor='yellow'" onblur="style.backgroundColor='white'"> <OPTION>white</OPTION> <OPTION>red</OPTION> <OPTION>green</OPTION> <OPTION>blue</OPTION> </SELECT> </FORM> </CENTER> </BODY> </HTML>
- ベストアンサー
- JavaScript
- プルダウンメニューの幅
フォームのプルダウンメニューの幅は強制的に変えることができるでしょうか。 --- <select> <option>●●●●●</option> <option>▲▲▲▲▲▲▲▲▲▲▲▲▲▲▲</option> </select> --- データとしては▲▲の文字数を保ちたいのですが、横幅を上の●●の文字幅にそろえたいときは、どうしたらよいのでしょう。 スタイルシート、JavaScriptを使うのでしょうか。
- ベストアンサー
- HTML
- CSSの背景の指定
２つのブロック要素を左右に分けて表示しようとしましたが、#contentの内容と#naviの内容が大きさに差がある場合に背景が透けてしまうのですがどうすればよいでしょうか？ 僕の予想では、#main_contentの背景が適用されると思ったのですがうまく機能していないみたいです。ここには書いていませんが、bodyに背景画像を入れていて、その画像がボックス内に出てしまうという感じです。 #naviや#contentにheightを指定してやると#main_contentの背景が余白の部分にちゃんとくるのですが、そのページごとにどちらが長くなるか予想できないので余った部分にきちんと指定した色がくるようにしたいです。 (ここでは便宜的に背景色を３色別々にしています。本来はすべて#fffにしようと思っています。) #main_content { background-color: #ff0; } /*content*/ #content { float: right; width: 512px; background-color: #f0f; } #content_inner { } /*navi*/ #navi { float: left; width: 256px; background-color: #0ff; } #navi_inner { }
- ベストアンサー
- HTML
- テキストのデフォルト非表示に関して
テキストのデフォルト非表示に関して 以下のように、プルダウンの選択によってテキストの表示、非表示をjavascriptを使って コントロールしようとしていまいすが、そもそもデフォルトでテキストを非表示にしたい場合は どのように記述すれば良いでしょうか。。。 初歩的な質問で申し訳ありません。 よろしくお願いします。 《内容》 <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> function ChangeSelection(form, selection) { if (selection.value=="休み") { document.getElementById("text_note").style.display = "block"; }else if (selection.value=="出張") { document.getElementById("text_note").style.display = "block"; }else { document.getElementById("text_note").style.display = "none"; } } </SCRIPT> </HEAD> <BODY> <FORM NAME="fm_a" ACTION="koudou_update2.php" METHOD="POST"> <TD NOWRAP SIZE="30"><input name="text_note" style="width:100%" VALUE=$out_goto></input></TD> <TD><select name="am_note" ONCHANGE="ChangeSelection(this.form, this)" style="width:145px;"> <option value=""></option> <option value="自席" style="background-color:#FFFFFF; color:#3366FF" $sqlline1>自席</option> <option value="離席" style="background-color:#3366FF; color:#FFFFFF" $sqlline2>離席</option> <option value="帰宅" style="background-color:#FFFFFF; color:#3366FF" $sqlline3>帰宅</option> <option value="午前休暇" style="background-color:#3366FF; color:#FFFFFF" $sqlline4>午前休暇</option> <option value="午後休暇" style="background-color:#FFFFFF; color:#3366FF" $sqlline5>午後休暇</option> <option value="休み" style="background-color:#3366FF; color:#FFFFFF" $sqlline5>休み</option> <option value="出張" style="background-color:#3366FF; color:#FFFFFF" $sqlline13>出張</option> </select></TD> </FORM> </BODY>
- ベストアンサー
- JavaScript
お礼
度々のご回答ありがとうございます。 やりたいことが実現できました！！ ありがとうございました。