【CSS】placeholder(プレースホルダー)の色を変更する方法

placeholderの色ってどうやって変更するの？

お問い合わせフォームなどでよくあるplaceholder。

これは『入力項目の例』を表示させておくもので、これがあると『こういう風に入力します』というのが分かります。

こういうやつですね。

placeholderのサンプル

薄い色にするのが基本ですが、今回はこの色を変える方法をご紹介します。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

placeholder(プレースホルダー)の色を変更する方法

例として以下のHTMLで解説していきます。

<div>
  <input type="text" class="name01" placeholder="例）山田太郎">
</div>
<div>
  <input type="text" class="name02" placeholder="例）山田花子">
</div>

これは『inputタグ』でも『textareaタグ』でも同じです。

そしてplaceholderの色を変えるには、以下のコードを書けばOKです。

::placeholder {
  color: red;
}

ただしこれだとplaceholder全ての色が変わるので、もし『inputタグ』と『textareaタグ』を分けたいとか『特定の入力項目だけ色を別にしたい』という場合は以下のようにします。

/* 特定のclass名に指定 */
.name01::placeholder {
  color: red;
}
/* inputタグ指定 */
input::placeholder {
  color: red;
}
/* textareaタグ指定 */
textarea::placeholder {
  color: red;
}

もしこのinputタグのcolorを変えてみたらどうなるでしょうか？

こちらは上の方をcolor: red;で文字色を赤く、下の方は::placeholderで設定しました。

See the Pen
placeholder① by junpei (@junpei-sugiyama)
on CodePen.

上の方はplaceholderの色は反映されていません。

しかし入力すると入力した文字の色が変わっています。

なので、

となります。

IEに対応させる場合

例の如くIEは対応していませんが、ベンダープレフィックスを使えばOKです。

/* IE対応 */
:-ms-input-placeholder {
  color: red;
}

まとめ

今回はplaceholder(プレースホルダー)の色を変更する方法を解説しました。

最後にIEの対応方法を書きましたが、もうIE対応はする必要ないと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！