【CSS】フォーカスしたらplaceholderを非表示にする方法 コーディング

placeholderをCSSだけでフォーカス時に消す方法

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等を使わないので、とても簡単に実装できます。

フォームの離脱率を下げることもできるかもしれません。
是非実装してみてください。