コーディング Web制作 CSS

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

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

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

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

なので、

  • color → 入力した文字の色
  • ::placeholder → placeholderの文字の色

となります。

IEに対応させる場合

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

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

以上になります。

 

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

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

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, CSS