- ベストアンサー
携帯でプルダウンメニューの背景色を変える方法は？
- CSSでoption要素のバックグラウンドカラーを指定しても、携帯では反応しないことがあります。
- 代わりの方法として、プルダウンメニューに画像を挿入する方法があります。
- これにより、携帯でもプルダウンメニューの背景色を変えることができます。
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
すみませんでした。formのselectのoptinでしたね。 スマートホンではなく、携帯電話のブラウザはスタイルシートを理解しないものがあります。また、optionにはbgcolor属性はありませんから、それも使えません。 optgroupを使うとかで区別するしかないでしょう。 サンプルHTMLです。 ★ウェブ標準のHTML4.01strict+CSS2.1です。(一部CSS3を使ってます) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )＋オプションでCSS3を選択 でチェック済み タブは＿に置換してあるので戻すこと。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- form select option+option{background-color:black;color:white;}/* 詳細度0,0,0,4*/ form select option+option+option{background-color:white;color:black;}/* 詳細度0,0,0,5*/ form select option+option+option+option{background-color:black;color:white;}/* 詳細度0,0,0,6*/ form select option+option+option+option+option{background-color:white;color:black;}/* 詳細度0,0,0,7*/ form select option+option+option+option+option+option{background-color:black;color:white;}/* 詳細度0,0,0,8*/ form select option+option+option+option+option+option+option{background-color:white;color:black;}/* 詳細度0,0,0,9*/ /* 二つ目以降のformの子孫のselectaのoption(CSS3のnth-child(n)) */ form+form select option:nth-child(2n){background-color:maroon;color:yellow;}/* 詳細度0,0,1,4*/ form+form select option:nth-child(2n+1){background-color:aqua;color:black;}/* 詳細度0,0,1,4*/ --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<form action="./"> ＿＿<p> ＿＿＿<select name="component-select"> ＿＿＿＿<option selected>Component_1</option> ＿＿＿＿<option>Component_2</option> ＿＿＿＿<option>Component_3</option> ＿＿＿＿<option>Component_4</option> ＿＿＿＿<option>Component_5</option> ＿＿＿＿<option>Component_6</option> ＿＿＿＿<option>Component_7</option> ＿＿＿</select> ＿＿＿<input type="submit" value="送る"><INPUT type="reset"> ＿＿</p> ＿</form> ＿<form action="./"> ＿＿<p> ＿＿＿<select name="component-select"> ＿＿＿＿<option selected>Component_1</option> ＿＿＿＿<option>Component_2</option> ＿＿＿＿<option>Component_3</option> ＿＿＿＿<option>Component_4</option> ＿＿＿＿<option>Component_5</option> ＿＿＿＿<option>Component_6</option> ＿＿＿＿<option>Component_7</option> ＿＿＿</select> ＿＿＿<input type="submit" value="送る"><INPUT type="reset"> ＿＿</p> ＿</form> </body> </html>
その他の回答 (2)
- lilillllililili
- ベストアンサー率71% (23/32)
プルダウンメニューのoptionタグは、CSSが適用されないブラウザも存在します。 携帯の場合はoptionタグへの背景色の指定などもすべて無視されるため、指定したとおりには表示されないのです。 Javascriptなどを使用するとなんとかなるかもしれませんが、 携帯向けにするならあまり凝ったことはしないほうが無難でしょう。 結論としましては、未対応なのでどうしようもありません。
お礼
レス頂きありがとうございます。 携帯の場合はoptionタグへの背景色の指定などもすべて無視されるとのことなので、プルダウンメニューの上にサンプルカラーを表示する形式にしました。 一部機種でも表示されないと困るので… ご教示ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞option.bk_y{} セレクタにoptionと言う記述が書かれていますが、optionという要素はありません。スタイルシートのセレクタの書き方がおかしい。PCではjavascriptを使ってoptionをblockにしているのでは？ ナビゲーションリンクですから <div class="nav"> <ul> <li><a href="">リンク先名</a> <ul> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> </ul> </li> <li><a href="">リンク先名</a> <ul> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> </ul> </li> </ul> </div> HTML5では、 <nav> <ul> <li><a href="">リンク先名</a> <ul> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> </ul> </li> <li><a href="">リンク先名</a> <ul> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> <li><a href="">サブ項目</a></li> </ul> </li> </ul> </nav> ですよね。ならCSSは div.nav ul li ul li{} div.nav ul li ul li+li{} div.nav ul li ul li+li+li{} div.nav ul li ul li+li+li+li{} と書くか(CSS2.1) div.nav ul li ul li:nth-child(2n){} div.nav ul li ul li:nth-child(2n+1){} と書く CSS3 デザインのためにHTMLは書かない!!!。
お礼
ご教示ありがとうございます。 sampleを使わせて頂きました。 私の環境では上手く表示されましたが、携帯電話のブラウザはスタイルシートを理解しないものもあるとのことなので、プルダウンメニューの上にsampleカラーを表示する形式にしました。 サンプルを頂戴しありがとうございます。 これを参考に勉強したいと思います。