placeholderを消さずにCSSで見出しに活用する方法

placeholderを消さずにCSSで見出しに活用する方法

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が動き、カーソルが外れたら元に戻ります。

この記事をシェアする

一押し人気コーナー紹介

CSS関連記事