2026.11.09HTML・CSS

selectのプルダウンが白地に白文字になる原因｜ダークモードのページで、Windows版Chromeの選択肢が消えた

暗い配色のページで、selectを開くと選択肢が白地に白文字で消えることがある。
2026年9月にこのサイトの計算ツールで起きた時の、原因と直し方と確かめ方を書いた。

暗い配色のページで、selectのプルダウンを開くと選択肢が消える。
白い地に白い文字で描かれているので、何も書いていないように見える。
僕のところでは、select要素そのものに color-scheme: dark を1行足して直った。

2026年9月25日、このサイトの計算ツール（高額療養費のシミュレーターなど9本）で起きた話だ。
年齢の区分を選ぶプルダウンが、Windows版のChromeで開くと真っ白になっていた。
報告を受けて手元で再現し、直して本番に出した。
その時の記録をもとに書いている。

何が起きていたのか

ページは暗い配色で、selectも暗い背景に白い文字にしていた。
閉じている状態の見た目は、思ったとおりに出ている。
問題は、クリックして開いた後の選択肢の一覧だった。

開いた一覧は、背景が白で、文字は白のまま。
マウスを乗せた行だけ色が変わるので、そこだけ読める。
知らない人が見たら、選択肢が空っぽのプルダウンに見えると思う。

プルダウンの一覧は、ページとは別に描かれる

selectを開いた時に出る一覧は、ブラウザがOSの部品に近い形で描いている。
ページの中の要素とは扱いが違い、CSSが全部は効かない。
MDNのselectの解説にも、select要素はこれまでCSSでスタイルを付けるのが難しかったと書かれている。
最近は、選択肢まで自由に装飾できる新しい仕組みも説明されているけれど、僕のページは昔ながらのselectだった。

そこで効いてくるのが color-scheme だ。
これは「この要素は明るい配色と暗い配色のどちらで描いてよいか」をブラウザに伝えるプロパティで、フォームの部品やスクロールバーの色に影響する。
暗いページなら、:root に color-scheme: dark を書いておくのが普通のやり方だ。

:root に書いてあったのに、効いていなかった

僕のページも、:root には color-scheme: dark を書いていた。
option と optgroup にも、暗い背景色と白い文字色を指定していた。
それでも、Windows版のChromeでは一覧が白くなった。

手元で試した結果、一覧を描く時に :root の指定を拾わないことがあると分かった。
そうなると、一覧は明るい配色で描かれる。
option に付けた背景色も効かなくなり、文字の白だけが残る。
これが白地に白文字の正体だった。

どのバージョンのどんな条件で起きるのかまでは、僕は詰めていない。
「すべての環境で起きる」とは言えないので、起きることがある、くらいに読んでほしい。

直し方は、select自体に color-scheme を書く

直したのは、select要素そのものに color-scheme: dark を足す1行だった。
いまは、暗い配色のselectには次の4つを必ずそろえるようにしている。

:root に color-scheme: dark：ページ全体の部品を暗い配色で描かせる。
select 自体にも color-scheme: dark：今回足した1行。ルートの指定を拾わない時のための保険。
select の背景は、不透明な暗い色：半透明にすると、下の色によって見え方が変わる。
option と optgroup に背景色と文字色を明示：どちらか片方だけだと、もう片方がブラウザの既定に戻る。

:root { color-scheme: dark; }
select {
  color-scheme: dark;
  background-color: #1b2233;
  color: #ffffff;
}
option, optgroup {
  background-color: #1b2233;
  color: #ffffff;
}

色の値は例で、自分のサイトの色に置き換えてほしい。
ライトとダークを切り替えるページなら、明るい側では color-scheme: light を書く。
暗い側の指定だけ残すと、今度は逆の事故が起きる。

確かめ方は、スクリーンショットでは足りない

ここが一番の落とし穴だった。
開いたプルダウンの一覧は、ページのスクリーンショットに写らないことが多い。
自動のチェックで画面を撮っても、閉じたselectしか写っていないので「問題なし」に見える。

だから僕は、開発者ツールで option の計算後の背景色を読んで確かめている。
getComputedStyle(option).backgroundColor が、指定した暗い色になっているかを見る。
最後は、Windows版のChromeで実際に開いて目で見る。
この2つを通してから出すようにした。

暗い配色の基本はダークモードの仕組みの記事に書いた。
スマホでフォームをタップすると画面が寄る話はこちらの記事にある。
フォームの部品は、ページの中なのにブラウザの持ち物でもある。
その境目で起きる事故は、見た目の確認だけでは拾えないと思う。

何が起きていたのか

プルダウンの一覧は、ページとは別に描かれる

:root に書いてあったのに、効いていなかった

直し方は、select自体に color-scheme を書く

確かめ方は、スクリーンショットでは足りない

出典