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

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

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

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

こういうやつですね。

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

効率よくコーディングしたい人はこちら

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

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

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

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

そしてplaceholderの色を変えるには、

::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.

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

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

なので、

となります。

IEに対応させる場合

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

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

以上になります。

コーディング案件の単価と作業効率を上げる！

Brainランキング1位獲得 ＆ 3日で500部突破

クチコミ約280件（平均スコア）

今だけ！5大特典あり🎁