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

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

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>

WindowsのInternet Explorer／Mozilla Firefox／Google Chromeで確認したところ意図したとおり反映されていました。
Macで確認すると、Safari／Mozilla Firefox／Google Chromeのどれも反映されません。

MacのWebKitは反映されない

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

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

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