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;
}以上になります。