フォーム入力時、変換中の文字が消える奇妙な症状 #CSS

2014年11月19日
カテゴリー ツール

フォーム入力時、変換中の文字が消える奇妙な症状

とあるブログで検索してみようと文字を入力したところ、このような現象に。

実はこのブログのお話だったのですが。このブログ「だけ」に当てはまるお話ではありませぬ。

ぬ! 検索ボックス、変換中の文字が消えてしまう〜

変換中の文字が消える

お問い合わせフォームも

問い合わせフォーム

なぜ? ググると発見!

なるほど! 実はどちらも消えてしまっているのではなく、変換中のテキストに「font-color: #fff」のスタイルを適用してしまっているからなのですね。

「::selection」を利用すると、こんな風にテキストを選択した時の背景色や文字色をスタイルシートでいじくれます。

選択中のテキスト

上のCSSはこんな感じ

::-moz-selection {
	background: #464646;
	color: white;
}

::selection {
	background: #464646;
	color: white;
}

このスタイルが変換中の文字にも適用されてしまうので、「変換中の文字が消えた!」かのように見えるのですね。どうやらこの現象はChromeとSafariに生じる模様です。(Chrome38、Safari7.1で確認)

気になったので、洒落たサイトばかりを紹介してるギャラリーサイトを調べてみました。

すると、すぐに同じ症状を患ってるサイトをいくつか発見できました。

こんな小さなブログの検索ボックスくらいなら、入力者も少ないので放置もアリですが、企業サイトの「お問い合わせフォーム」でコレは困ります。

お問い合わせフォームの使いやすさは如実にコンバージョンに影響しますからね。変換中の文字が見えないのは、何とも使い勝手が悪いです。企業の窓口としては、チト問題。すぐに解決しておいた方がいいですね。

解決するには、「::selection」を使わない。使うなら、いい体裁を保てるよう「::selection」まわりのスタイルシートを見直しましょう。

ちなみに、ブラウザ実装は続いてますが、「::selection」は仕様外のようです。W3C準拠を目指す場合もご注意を。

最後にひとこと

こちらもcheck!ついに再開!ウェブさえのHP作成サービスはこちら

シェアしてくれると嬉しいです!(コメントも喜ぶよ

あなたにはこんな記事もおすすめ!
ん?最新情報を見逃さない方法!?
わざわざブログに来なくても、自動的にウェブさえの更新情報を受け取ることができます。「お、いいね!」と思われた人は、SNSのアカウントをフォローするか、RSSリーダーへ登録、どれでも都合のいい方法で受け取ってくださいね! しばらく休止していたウェブさえマガジンも最近再開しました。メールで受信できます。受信は無料で、いつでも解約できるので気軽に登録してみてください。
ウェブさえマガジン
  • facebook
  • twitter
  • google

コメントも大歓迎!

Top