HTML5からはinputなどの入力欄に対してplaceholder属性というのを付与することでプレースホルダーを表示できるようになりました。

何を入力してほしいのかユーザーに伝えられて便利な属性ですが、そのカスタマイズをするには入力欄ではなくプレースホルダーそのものにCSSを適用する必要があります。

ここではそのプレースホルダーのカスタマイズ方法とかCSSコード例についてまとめました。

まず初めにplaceholder属性について少し解説

これは冒頭でも書いたように入力欄のプレースホルダーを設定するための属性

プレースホルダーというのは入力欄が空の時に表示されるヒント的なテキストのことで、これを設定するためにHTML5から新たに追加されました、

例えば入力欄が空の時、「キーワードを入力...」と表示させるなら次のinput要素を作成すればOK

placeholder="キーワードを入力..."  のようにただ単に表示させたいヒントテキストを渡すだけです。あと当然ですがHTMLタグなどは使用できません。

そして次がプレースホルダーが表示された入力欄の例

ブラウザにもよりますが大抵は文字色グレーで左寄りで表示されるはず

半透明の灰色で目立たないからヒントテキストとしては分かりやすい色なのかなと思います。

でも場合によっては文字色をグレー以外にしたりテキストの位置を変えたいこともありますよね。そういう時は次に紹介するような方法で簡単に変更可能です。

プレースホルダーの色などをカスタマイズするには

そのやり方はとても簡単

プレースホルダーを表示している入力欄のplaceholder疑似属性にCSSを適用するだけです。

例えば次のようなinput要素があるとしましょう。

ここでは type="text"  としていますが、入力欄であるなら type="search"  や type="email"  や type="password"  などなんでも構いません。

そしてこのinput要素内のプレースホルダーの文字色と太さ、配置を変更したいとしましょう。

その場合は次のようなCSSを適用してあげればOK

::placeholder  を使うことでプレースホルダーを普通の要素と同じようにカスタマイズできます。

ちなみにこのCSSが適用された入力欄の見た目は次画像の通り

ここでは文字を薄緑の太字、配置を中央寄せにしてみました。

以上が入力欄のプレースホルダーを変更する方法

::placeholder  という疑似要素から好きなように変更できるので、サイトデザインに合わせて見た目が色々カスタマイズできるのが便利な所です。

::placeholder疑似要素を使う時の注意点

最後にplaceholder疑似要素を使う時の注意点について

これを使うときはテキストヒントだと分かるような色にした方がいいと思います。デフォルトだと半透明の灰色になってますが、それは入力テキストと区別させるためです。

もしサイトのテーマ色に合わせたプレースホルダーにしたい、という場合もテーマ色そのものを使うのではなく半透明にするか明るめの色に変更するのが誤解を生みにくいはずです。

もしテーマ色から明るめの色を作りたいという場合は次のWebツールを使うのがオススメ

scg.ar-ch.org

 

43 Shares

93 Users

152 Pockets

Sass Color Generator

http://scg.ar-ch.org

ある色のカラーコードを入力すると「10%明るい」あるいは「-10%暗い」などのように50%～-50%までの範囲で明るさを変えた色が生成できます。

結構便利なツールなのでプレースホルダ－の文字色などテーマ色から派生色を作るときに役立つかもしれません。

ここまでのまとめ

ということで簡単にここまでをまとめると次の通り

• プレースホルダ―は入力欄に対して指定可能
  input要素などに対してplaceholder属性を指定することでヒントテキストが表示できる。この属性はHTML5から新たに追加されたもの
• ::placeholder疑似要素からカスタマイズ可能
  このプレースホルダーの文字色とか配置を変更するには input::placeholder  のようにplaceholder疑似要素に対してスタイルを指定してあげればOK

以上input要素のプレースホルダーをカスタマイズする方法についてでした。