CSSだけで、フォームのinputタグにフォーカスするとplaceholder（プレースホルダー）を非表示にすることができます。
フォームの使い勝手も向上するので、Webサイトに実装しておきたいテクニックです。
jQuery等を使用して、フォーカスした瞬間にプレースホルダーを消す方法もありますが、今回はCSSだけで実装する方法をご紹介します。
placeholder（プレースホルダー）とは
このような、フォームの入力エリア内に、記入例が表示されているのを見たことないでしょうか。
どんな内容を入力すれば良いのか、ユーザーにわかりやすくするためのガイドテキストのことを、プレースホルダーといいます。
placeholderの設定方法
<input placeholder="表示させたいテキスト">HTML上で、<input>や<textarea>タグに上記のコードを記述することで表示できます。
デフォルトのplaceholder
デフォルトのプレースホルダーを表示させてみました。
薄い文字色で表示されていますね。
でも、入力エリアにフォーカスして、いざ入力しようと思ってもプレースホルダーが残ったままです。
デフォルトだと文字を入力し始めないとプレースホルダーが消えてくれないのです。
このままだと、既に入力されていると勘違いしてしまうユーザーも出てきてしまいます。
フォーカスしたらプレースホルダーを非表示に
CSS
CSSに下記のコードを記述します。
input:focus::-webkit-input-placeholder {
color: transparent;
}
input:focus::-moz-placeholder {
color: transparent;
}
input:focus::-ms-input-placeholder {
color: transparent;
}
input:focus::placeholder {
color: transparent;
}デモ
入力エリアにフォーカスしてみてください。
フォーカスした瞬間にプレースホルダーが非表示になっていると思います。
仕組み
仕組みとしては、フォーカスしたタイミングでプレースホルダーの文字色を透明にしています。
input:focus::placeholderこの部分が、「フォーカスされた<input>タグのplaceholderにCSSを適用します」という意味。
color: transparent;この部分が、「文字色を透明に」という意味になっています。
まとめ
フォーカスした瞬間にplaceholderを非表示にするテクニックをご紹介しました。
jQuery等を使わないので、とても簡単に実装できます。
フォームの離脱率を下げることもできるかもしれません。
是非実装してみてください。