プレースホルダーの
文字色の変え方

  • CAUTION
  • 2年以上
  • 古い記事

こんにちは。

皆さまはプレースホルダー知ってますか?

テキストボックスの中に薄い色で「キーワード検索」と書かれています

これです。

今回はこちらのプレースホルダーの文字の色を指定する方法を綴っていきます。

プレースホルダーの指定方法

まずはプレースホルダー、またはplaceholderの指定方法を書いていきます。

プレースホルダーに「キーワード検索」と書かれたテキストボックスを設置します。

<input type="text" placeholder="キーワード検索">

文字色の指定方法

プレースホルダーの文字色はCSSで指定できます。

「search-form」クラス内のinput要素のプレースホルダーの文字色を「#A1C37D」に指定します。

.search-form input::placeholder { color: #A1C37D; }

まとめ

プレースホルダーは上手く使えばユーザビリティーの向上が期待できますが、逆に使い方を誤ると入力の妨げになってしまう事もあります。

例えばプレースホルダーの文字色を他のテキストと同じくらいの濃さにしてしまうと、未入力なのに既に値が入っているように見えてしまったりします。

プレースホルダーを正しく使い、入力する人に優しいフォームづくりを心掛けていきたいです。

この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。