ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

optionタグに背景色が設定できない現象

スポンサーリンク

MacWebKitの制限とは予想できませんでした。

f:id:AJYA:20140723051729j:plain
photo credit: iceman9294 via photopin cc

背景色が反映されない

セレクトボックスの選択時に、選択肢によって背景色を分けた方が選びやすかったので、以下のように選択肢に背景色の設定をしました。

<select>
  <option value="Japan" style="background-color:#7ebea5;">Japan</option>
  <option value="United Kingdom of Great Britain and Northern Ireland">United Kingdom of Great Britain and Northern Ireland</option>
  <option value="United States of America">United States of America</option>
</select>

WindowsInternet ExplorerMozilla FirefoxGoogle Chromeで確認したところ意図したとおり反映されていました。
Macで確認すると、SafariMozilla FirefoxGoogle Chromeのどれも反映されません。

MacWebKitは反映されない

反映されない原因を調べていると、以下のQ&Aを見つけました。
HTML プルダウンメニュー選択時の背景色をMacで表示したい - QA@IT

MacWebKitは、optionタグのbackground-colorを設定できないように制限され、回避できないようです。


optionタグに背景色を設定するのは諦めて、文字列にマークを付けて区別するようにしました。