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;">黒/白
と記述しても携帯では反応しません。
携帯ではプルダウンメニューの背景色を1行ごとに変える事は無理ですか?
代わりの方法としてプルダウンメニューに画像をはめ込むとか…あればご教示お願い致します。
No.2ベストアンサー
- 回答日時:
すみませんでした。
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>
ご教示ありがとうございます。
sampleを使わせて頂きました。
私の環境では上手く表示されましたが、携帯電話のブラウザはスタイルシートを理解しないものもあるとのことなので、プルダウンメニューの上にsampleカラーを表示する形式にしました。
サンプルを頂戴しありがとうございます。
これを参考に勉強したいと思います。
No.3
- 回答日時:
プルダウンメニューのoptionタグは、CSSが適用されないブラウザも存在します。
携帯の場合はoptionタグへの背景色の指定などもすべて無視されるため、指定したとおりには表示されないのです。
Javascriptなどを使用するとなんとかなるかもしれませんが、
携帯向けにするならあまり凝ったことはしないほうが無難でしょう。
結論としましては、未対応なのでどうしようもありません。
レス頂きありがとうございます。
携帯の場合はoptionタグへの背景色の指定などもすべて無視されるとのことなので、プルダウンメニューの上にサンプルカラーを表示する形式にしました。
一部機種でも表示されないと困るので…
ご教示ありがとうございました。
No.1
- 回答日時:
>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は書かない!!!。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS CSSでサイトの背景に画像を組み込みたいのですが反映されません 2 2022/11/22 16:21
- オープンソース cssで中央寄せ 1 2023/05/19 06:25
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS HTMLで特定の文字だけ色を変えたいのですが、指定した色と違う色が反映してしまいます。 下記、「前」 5 2023/06/27 12:08
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
CSSが上手く反映されないみたい...
-
liタグの中に<p>タグやら<dl>を...
-
ulタグやliタグの中でbrタグ...
-
<table>の高さ固定。情報増加時...
-
html/cssの、navを2段にする...
-
アコーディオンがうまくいかない。
-
ボタンを横に並べて表示させる方法
-
ulとliで囲った文字の一部を変...
-
html <li>の中の文字一部に色を...
-
ホームページビルダーで同じ行...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
リンク文字同士の間隔を開ける...
-
html <ul></ul>の並びで一行空...
-
画像にリンクを張ると画像がず...
-
リストマーカーをボックス内に...
-
リストの数字のフォントサイズ...
-
li 3列表示
-
リスト(ul / li)タグの左イン...
-
リンクの格納展開のHTMLタグを...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<table>の高さ固定。情報増加時...
-
リストマーカーをボックス内に...
-
画像にリンクを張ると画像がず...
-
レスポンシブWebデザインでリン...
-
HTMLで組織図を作成する方法
-
ulタグやliタグの中でbrタグ...
-
ポップアップメニューを表のよ...
-
liタグの中に<p>タグやら<dl>を...
-
リストの数字のフォントサイズ...
-
<ul>~</ul>が二つ続くと間に改...
-
<ul><li></li></ul>にするメリ...
-
html <ul></ul>の並びで一行空...
-
ulとliで囲った文字の一部を変...
-
番号付きリスト(<Ol><Li>・・...
-
html/cssの、navを2段にする...
-
display:table;を多段表示させたい
-
HTML5のfooterに見出しを付けて...
-
divタグ内のコンテンツが重なっ...
-
リストを2つに分割して、それぞ...
-
複数行にまたがる括弧を表示し...
おすすめ情報