重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

【GOLF me！】初月無料お試し

プルダウンメニューの背景色を１行ごとに変えたいです

解決済

  • 質問者：nomark
  • 質問日時：
  • 回答数：3件

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;">黒／白
と記述しても携帯では反応しません。

携帯ではプルダウンメニューの背景色を１行ごとに変える事は無理ですか？
代わりの方法としてプルダウンメニューに画像をはめ込むとか…あればご教示お願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

すみませんでした。

formのselectのoptinでしたね。
スマートホンではなく、携帯電話のブラウザはスタイルシートを理解しないものがあります。また、optionにはbgcolor属性はありませんから、それも使えません。
　optgroupを使うとかで区別するしかないでしょう。

サンプルHTMLです。
★ウェブ標準のHTML4.01strict+CSS2.1です。(一部CSS3を使ってます)
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )＋オプションで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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご教示ありがとうございます。
sampleを使わせて頂きました。

私の環境では上手く表示されましたが、携帯電話のブラウザはスタイルシートを理解しないものもあるとのことなので、プルダウンメニューの上にsampleカラーを表示する形式にしました。

サンプルを頂戴しありがとうございます。
これを参考に勉強したいと思います。

通報する
お礼日時：2012/03/24 11:07

No.3

プルダウンメニューのoptionタグは、CSSが適用されないブラウザも存在します。


携帯の場合はoptionタグへの背景色の指定などもすべて無視されるため、指定したとおりには表示されないのです。

Javascriptなどを使用するとなんとかなるかもしれませんが、
携帯向けにするならあまり凝ったことはしないほうが無難でしょう。

結論としましては、未対応なのでどうしようもありません。
    • good
    • 0
    • 件
通報する
この回答へのお礼

レス頂きありがとうございます。

携帯の場合はoptionタグへの背景色の指定などもすべて無視されるとのことなので、プルダウンメニューの上にサンプルカラーを表示する形式にしました。

一部機種でも表示されないと困るので…

ご教示ありがとうございました。

通報する
お礼日時：2012/03/24 11:10

No.1

  • 回答者： ORUKA1951
  • 回答日時：

＞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は書かない!!!。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報