Q&A
回答ありがとうございます
<option value="hoge" style="background-color:#FFFF00">grape</option> を追加してみたところFirefoxではCSSが適応されますがやはりChromeではされませんでした
そのためjqueryの問題ではなくChrome(とHTML?)に原因があるのではないかと思っています
またChromeのキャッシュを削除しても変わりませんでした
HTML
1<html> 2 <head> 3 <meta charset="utf-8"> 4 </head> 5 <body> 6 <select id="fruits"> 7 <option value="foo">apple</option> 8 <option value="bar">banana</option> 9 <option value="baz">peach</option> 10 </select> 11 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 12 <script type="text/javascript"> 13 $('<option></option>') 14 .attr('value', 'testadd') 15 .text('orange') 16 .css('background-color', '#FFff00') 17 .appendTo('#fruits'); 18 </script> 19 </body> 20</html> 21
このようなコードを書いたところFirefoxでは正常にorangeの項目が'#FFff00'の色に変わったのですが、ChromeやOperaではCSSが反映されません
Chromeのエラーログなどを確認するも何も表示されていませんでした
原因や解決法がわかる方いっらしゃいましたらご教示願います
追記
Chrome開発ツールのElementsはこのようになっています
styleは追加されていますが反映がされません
回答4件
0
Mac Chrome 46.0.2490.71 最新版で同じようにスタイルが反映されないのを確認しました。
原因まで調べることはできませんでしたが。。。
追記
Mac用のWebKit共通の制限で、selectメニューに色をつける方法はありません。とのことです。
http://qa.atmarkit.co.jp/q/2390
投稿2015/10/21 04:09
編集2015/10/21 04:15
総合スコア33
0
chrome のバージョン 46.0.2490.71 m
oper のバージョン 32.0.1948.69
で実行してみましたが、私も期待したとおりに動きます。
jQueryの動作がおかしいのか、そもそもHTMLの出力結果がおかしいのかを確認してみてはいかがでしょうか？
例えば、
投稿2015/10/20 05:49
総合スコア10
0
そのままコピペでやってみましたが、
期待値通りの動作をしていました。
バージョンは「46.0.2490.71 m(64-bit)」です。
投稿2015/10/19 20:35
総合スコア1124
回答ありがとうございます
私もいまローカルにあるプログラムではなくここに書き込んだコードをコピペして実行してみたのですがやはり反映されませんでした
0
ベストアンサー
appendTo('#books'); これは#fruits の間違いでしょうか？
コードそのままいただいて実行してみましたが、chromeですが色ついています。
バージョン 46.0.2490.71 m
投稿2015/10/19 15:47
総合スコア2068
回答ありがとうございます
そうです、#fruitsの間違いです
申し訳ありませんでした
検証いただきありがとうございます
私もバージョン 46.0.2490.71のChromeを使用していますがやはり色はつきません
念のためChromeの再起動も試みたのですが変わりませんでした
あら。バージョン同じなのに駄目なんですね。
DOCTYPEでしょうか？
先頭行に次のを追加しても駄目ですか？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
因みにこちらでは
<option value="testadd" style="background-color: rgb(255, 255, 0);">orange</option>
これがselectの最下段に追加されており、ブラウザで確認するとプルダウンしたorangeの項だけに色がつきます。
「CSSが反映されません」というのはoptonは追加されておりvalueも正しいが、styleの追加がない状態ですか？styleはあるが色が変化していない等でしょうか？
回答ありがとうございます
ご指摘していただいた通りDOCTYPEの指定を忘れていたので追加してみましたが反映されませんでした
styleはあるが色が変化しておりません
ソースのキャプチャを追記しましたのでもしよろしければ確認よろしくお願いします
> styleはあるが色が変化しておりません
ということはjQueryは正しく動いるが、記述されたスタイルが表示に反映されていない状態ということですね。
見た感じおかしなところは無さそうですが、ディレロッパーツールズ(F12で開く)のelementで表示して、問題のoptionをクリックすると、恐らく画面右側にstyleが表示されます。そこに「background-color: rgb(255, 255, 0);」が無いか、あっても横線で否定されてたりしませんか？
その場で書き換えできるので、表記を色々変更してみたら問題がわかるかも知れません。
rgb指定をディベロッパーツール上で16進指定の色に変えてみたら色ついたりとか…
それとほかのスタイルは当たりますか？font-size:large とか
回答ありがとうございます
デベロッパーツールで確認したところ「background-color: rgb(255, 255, 0);」はありました。横線が引かれていることもなかったです。
また16進数に替えたりキーワードでカラーを指定してみたりしたのですがかわりませんでした。
ご指摘いただいたfont-size:largeを追加してみるとこちらは正しく適応されていました。
select タグの下にp タグを挿入しそのタグを操作したところcssのカラーもfont-size:largeなどの他のスタイルも適応されました。
よってselect タグの中で、かつカラーの適応のみができていないということが予測されるのですが未だ解決方はわかっておりません。
Macのブラウザ固有の現象かも知れないそうです。
http://ajya.hatenablog.jp/entry/2014/07/23/053909
cozynooksさんの投稿を見て検索してみたら↑のようなページがHITしました。
手元にMACが無いので確認できませんが…
リンク先の更に先の質問ページにも書かれていますが、selectを使わないcss3を利用したプルダウンなどで対応するしかないのかも知れません
回答、参考URLありがとうございます
Mac固有の現象だったのですね
私のマシンはMacなのでおそらくこれが原因と考えて間違いないかと思います
ここ数日悩み続けていたことがやっと解決しました
何度も丁寧に回答していただき本当にありがとうございました
助かりました
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2015/10/21 10:24