プログラミング

placeholderの文字の色を変える方法【CSS】

入力フォームの入力欄にあらかじめ入力されている文字、placeholder(プレースホルダー)は薄いグレーなどの色になっていることが多いですが、場合によっては文字の色を変えたいということもあるかもしれません。

::placeholder疑似要素を使う

See the Pen
::placeholder
by KUBO (@KUBOGEN)
on CodePen.

疑似要素である「::placeholder」を使うことで、input要素やtextarea要素に指定されているplaceholderの文字色を変更することができます。

::placeholderは一部サポートされていないブラウザもあるので、ベンダープレフィックスが必要かどうかもチェックするようにしてください。

/* for Chrome/Safari/Opera */
::-webkit-input-placeholder

/* for Edge */
::-ms-input-placeholder

Leave a Comment