入力フォームの文字が変換中に消える現象CSSが原因?

入力フォームの文字が変換中に消える現象CSSが原因?

Form 01

▲と、こんな感じで入力フォーム状に文字を入力したい時、その文字の変換中に変換中の文字が消えてしまうことがあるようです。

入力フォームの文字が変換中に消える原因は?

実はこれ、CSSが原因です。

さて、この件のCSSの部分はというと以下の通りです。

これ、本来はページ上のテキストを選択した際のスタイルを制御する時に使われます。

▼例えば文中のテキストをドラッグで選択した状態

Select 01

このように文字がハイライト(反転)されます。選択した範囲は水色といいますか、ブルー系の背景になります。良く見る感じですね。

この見た目を制御しようというのが先ほどのCSSなのです。

さて、同じ文章の箇所を先ほどのCSSが適用された場合はどうかというと、

Select 02

このように背景が指定したグレー系で、文字が白く(#fff)なっています。

実は変換中の文字はまさにこの選択中ってのと同じ状態とみなされているようでして、文字の色が白(#fff)になってしまいます。そのため背景の白と同化してしまって、文字が消えたように見えるのです。

こういう現象が起きるのは比較的海外製のデザインテーマなどに多いようです。向こうは変換なんてしませんから、特別気にする必要がないのでしょう。例えばWordPressの海外製のテーマなどを使用しているのであれば、念のためこのチェックをしてみるというのも良いかもしれませんね。