Zenn
🫥

【CSS】ブラウザのダークモードでtextareaの文字が消える原因と解決策

に公開
CSS
Panda CSS
tech

【CSS】 ブラウザのダークモードで textarea の文字が消える原因と解決策

どんなユーザー環境でも開発者が意図したデザインが維持されるようにする。

TL;DR

inputやtextareaのようなフォーム要素をスタイリングする際は、ブラウザによる予期せぬ「おせっかい」な挙動を防ぐために、文字色と背景色は必ずセットで指定することが非常に重要なのだ

const textareaStyles = css({
  color: "gray.900",        // ← 追加: 文字色を明示的に指定
  bg: "white",              // ← 追加: 背景色を明示的に指定
  _placeholder: {           // ← 追加: placeholderの色も指定
    color: "gray.500",
  },
  ...略
});

問題点 (Problem)

textareaに入力した文字が、Chromeなどのブラウザをダークモードに設定しているユーザー環境で、薄くなったり見えなくなったりしたのだ。

修正前:
修正前

文字が見えないのだ..

原因 (Cause)

コードの中でtextareaの文字色 (color) と背景色 (bg) を指定していなかったため、ブラウザが気を利かせて独自のダークモードスタイル（暗い背景＋明るい文字）を適用しようとしたのだ。

しかし、サイト全体の背景は明るいままだったので、「明るい背景に明るい文字」が重なってしまい、結果として文字のコントラストが失われたのが原因なのだ。

解決策 (Solution)

ブラウザによる意図しないスタイルの自動適用を防ぐため、textareaのスタイルにcolorとbgを明示的に指定したのだ。また、placeholderの文字色も指定してテキストの文字見えなくなる問題は無事解決したのだ。

修正後:
修正後

意図したように文字がダークモードでも見えるようになったのだ。

P.S.

修正前修正後の添付画像の画質が荒いのが申し訳ないのだ。

実は、前のブログからデータをお引越ししてくるときに、ぼく、うっかり元のきれいなデータを消しちゃったのだ。それに、古いZennのアカウントも消しちゃったから、サーバーに置いてあったお写真も全部いなくなっちゃって、URLで見に行ってもなーんにもない状態だったのだ。

今回は Google のサーバー側に、画像検索で使うためのサムネイルがキャッシュとして残ってたのでそれを取ってきたのだ。オリジナルデータを圧縮しているので画像が粗くなってしまっているのが現状なのだ。

今後気をつけるのだ..🙏

参考：
なぜ削除された画像を取得できたのか？→ https://zenn.dev/hamuziro/articles/77a4e91e65aed8

Discussion