placeholderの色ってどうやって変更するの？
お問い合わせフォームなどでよくあるplaceholder。
これは『入力項目の例』を表示させておくもので、これがあると『こういう風に入力します』というのが分かります。
こういうやつですね。
placeholderのサンプル
薄い色にするのが基本ですが、今回はこの色を変える方法をご紹介します。
コーディングの時給と作業効率を上げる！
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1100部以上販売し、レビューは570件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇
5大無料特典2023年12月31日まで！
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;
}まとめ
今回はplaceholder(プレースホルダー)の色を変更する方法を解説しました。
最後にIEの対応方法を書きましたが、もうIE対応はする必要ないと思います。
以上になります。
