【CSS】フォーム入力欄のplaceholderの色を変更する方法
お問い合わせフォームの入力フィールドの「placeholder」。
この記事では「placeholder」のテキストの色を変更する方法をご紹介したいと思います。
placeholderとは
「placeholder」はお問い合わせフォームでテキストを入力するinputやtextareaなどに入力ヒントや入力例を記載しておくためのテキストです。
「placeholder」を設置したinputやtextareaはこちら。
/* inputの場合 */
<input type="text" name="name" placeholder="例）山田 太郎">/* textareaの場合 */
<textarea name="comment" placeholder="お問い合わせ内容を入力してください。"></textarea>このコードをブラウザで表示すると以下のようになります。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
このようにフィールドに何も入力されていない場合の入力ヒントや入力例が用意されているフォームはよく見ますね。
フォーム入力欄のplaceholderの色を変更する方法
ここからが本題です。「placeholder」のテキストの色を変更する方法はこちら。
::placeholder{
color: #ccc;
}実装例はこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
これだけです。簡単に「placeholder」のテキストの色が変わりましたね。
この記述だけで現在主流のブラウザであれば全てカバー出来ますが、古いバージョンのGoogle ChromeやIE10やIE11まで対応するとなるとさらに以下の記述も追加する必要があります。
/* 古いGoogle Chromeに対応する記述 */
::-webkit-input-placeholder{
color: #ccc;
}
/* IE10,IE11に対応する記述 */
:-ms-input-placeholder{
color: #ccc;
}IE10とIE11に対応する記述は「:（コロン）」がひとつなので注意が必要です。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
ちなみに、colorプロパティでテキストの色を指定した場合は、入力後のテキストの色だけが変わり、「placeholder」のテキストの色は変わりません。
失敗例はこちら。
See the Pen Untitled by 寺井大樹 (@teraisan) on CodePen.
まとめ
いかがでしたか？
「placeholder」のテキストの色を変更するにはcolorプロパティではダメで、::placeholderという少し変わった疑似クラスの記述が必要です。
デフォルトの「placeholder」のテキストの色は入力したテキストと比べて若干薄くなっていますが、出来ればもう少し薄くしておきたいですね。
そんな時に便利なCSSの指定のご紹介でした。
