今更学んだ「テキスト変換する前の文字が見えない」原因

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。

フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?

原因は、CSSの設定でした。

「::selection」というセレクタで文字の色をホワイトにしていたから。

「::selection」というセレクタは変換前の文字だけでなく、テキスト選択した箇所のハイライトカラーも変更できるみたいです。

こんな感じでベンダープリフィックスを指定します。

対応するブラウザは

  • Google Chrome
  • Safari
  • Firefox
  • Opera
  • IE9+

設定する時は背景の色と同じ色を指定しないように気をつけましょ

SNSでもご購読できます。