CSSで::placeholderにスタイルを設定する方法

Placeholderとは？

「Placeholder(プレースホルダー)」は<input>タグや、<textarea>に何も入力がない状態で、代わりに表示される、ガイド用のテキストです。

デフォルトでは、通常の入力テキストよりも少し薄い色で表示されていて、テキストが入力されると表示が消えます。

<input type="text" placeholder="山田 太郎">

See the Pen placeholder by Masakazu Saito (@31mskz10) on CodePen.

Placeholderのスタイル設定

スタイルの指定方法は簡単で::placeholderという擬似クラスを使えばOKです。

::placeholder{
color:#ccc
}

要素名やclass名などを前に付けることで、特定要素に対してのみの指定も可能です。

.strong::placeholder{
color: #f00;
}

ブラウザの対応もかなり進んでは来ましたが、EdgeやIE11に対応するためにはベンダープレフィックスも必要です。

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
color:#ccc;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
color:#ccc;
}

See the Pen yLLvVBp by Masakazu Saito (@31mskz10) on CodePen.