placeholderを消さずにCSSで見出しに活用する方法
placeholderはフォームフィールドへの入力ガイダンスとして使われます。
CSSで工夫すれば、フォーカス時にplaceholder文字を消さずに見出しとして代用できます。
カーソルが外れたら元のplaceholderの位置に戻るので大変便利です。
placeholderを入力フィールドから移動させる
お問い合わせフォームの入力フィールドにあらかじめ、文字が入ったものを見かけますよね。
あれが「placeholder」と呼ばれるもので、その入力フィールドの「入力例」を紹介しています。
通常はフィールドにカーソルを入れると消える事が多く、実際に文字が入っている訳ではありません。
主にそのフィールドの入力ガイダンスとして使われます。
例えば「半角英数字で入れて下さい」とか「できるだけ詳しくお書き下さい」などですね。
placeholderの欠点
placeholderはどう入力すれば良いかわかるので便利ですが、以下の面もあります。
・入れ始めると消えてしまう事が多い
・見出しもあるので文字情報が混雑する
本記事ではフォーム入力時にplaceholderの語句を消さず、見出し部分に移動させる方法をご紹介します。
これによりplaceholderの文字情報を「入力ガイダンス」かつ「見出し」として併用する事ができます。
実装方法
CSSのみで簡単に実装
この方法はJsファイルを使わず、CSSのみで実現できるので大変便利です。
大抵の場合、見出しとplaceholderは役割がかぶります。どちらかがあれば事足りる訳です。
ポイント
今回はあえて「お名前」や「email」などの見出しは設置しません。
各フィールドにplaceholderの文字が表示されている状態です。
カーソルを入れた時、placeholderの文字がそのまま見出し位置に移動します。
移動したplaceholderを見ながら入力できるので、見出し＆ガイダンスの役割を果たす訳ですね。
HTML
<div class="custom-field"> <input name="お名前" value="" required="required"> <span class="placeholder">お名前</span> </div>
上記の様にplaceholder用の文章をspanタグで囲い、inputの外に出しておくことがコツです。
CSS
.custom-field { position: relative; font-size: 14px; padding-top: 20px; } .custom-field input { border: none; -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none ; appearance: none; outline: none; background-color: #f2f2f2; padding: 12px; border-radius: 3px; width: 250px; font-size: 14px; } .custom-field .placeholder { position: absolute; left: 12px; top: calc(50% + 10px); transform: translateY(-50%); color: #aaa ; transition: top 0.3s ease-in-out, font-size 0.3s ease-in-out, color 0.3s ease-in-out; } .custom-field input:valid + .placeholder, .custom-field input:focus + .placeholder { top: 10px; font-size: 12px; color: #cc0000; }
CSSはこれだけです。このままコピペで簡単に実装できます。
サンプル例
フィールドにカーソルを入れると、見出し位置にplaceholderが移動します。
注意
文字情報が絶対配置で上に重なっているので、文字部分をクリックしてもフィールド上にカーソルが入った事になりません。
文字列を避けてフィールド上をクリックする必要があります。
ブラウザが出す入力候補ボックスが邪魔をして、見えずらいかも知れません。
CSSの解説
.custom-fieldのボックス
まずはinputタグごとに.custom-fieldボックスで囲みます。
この中で絶対配置を掛けるので、position: relative;を入れています。
今回のサンプルの場合、各フィールドごとに.custom-fieldで個別に囲む必要があります。
inputのスタイリング
次にinputのデザインをCSSで設定していきます。ここは自由にスタイリングしてOKです。
placeholderのスタイリング
今回placeholder用の文字列はinputの中に入れるのではなく、別途spanタグで作ります。
top: calc(50% + 10px); transform: translateY(-50%);
絶対配置を使って、.placeholderがフィールド上に重なるよう調整しています。
.placeholderの色や大きさも滑らかに変化するよう、transitionで設定をしています。
transition: top 0.3s ease-in-out, font-size 0.3s ease-in-out, color 0.3s ease-in-out;
カーソルが入った時のギミック
入力フィールドにカーソルが入った時の.placeholderのスタイルを設定します。
つまり見出しの位置に動いた時の状態ですね。
top: 10px; font-size: 12px; color: #cc0000;
それぞれ位置や文字サイズ・色など、移動後のスタイルを記述します。
隣接兄弟結合子
.custom-field input:valid + .placeholder, .custom-field input:focus + .placeholder
上記で使われている「＋」マークは、隣接兄弟結合子（adjacent sibling combinator）と呼ばれます。
2つのセレクタをつないで、1つ目の要素の直後にある2つ目の要素を対象とします。
この時2つの要素は、同じ親要素の子同士である必要があります。
カーソルが入ったフィールドのみ移動
これにより、カーソルが入った（フォーカスした）ボックスの次にある.placeholderが指定される事になります。
それに対しカーソルが入っていない.placeholderは元の位置のままです。
この設定により、カーソルが入ったフィールドではplaceholderが動き、カーソルが外れたら元に戻ります。
