Web制作 CSS

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

【CSS】placeholder(プレースホルダー)の色を変更する方法
placeholderの色ってどうやって変更するの?

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

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

こういうやつですね。

placeholderのサンプル

placeholderのサンプル

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

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

コーディングの時給アップにはこちら!


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の色は反映されていません。

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

なので、

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

となります。

 

IEに対応させる場合

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

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

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
740部以上販売し、レビューは410件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

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

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

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

-Web制作, CSS