入力フォームの入力欄にあらかじめ入力されている文字、placeholder(プレースホルダー)は薄いグレーなどの色になっていることが多いですが、場合によっては文字の色を変えたいということもあるかもしれません。
::placeholder疑似要素を使う
See the Pen
::placeholder by KUBO (@KUBOGEN)
on CodePen.
疑似要素である「::placeholder」を使うことで、input要素やtextarea要素に指定されているplaceholderの文字色を変更することができます。
::placeholderは一部サポートされていないブラウザもあるので、ベンダープレフィックスが必要かどうかもチェックするようにしてください。
/* for Chrome/Safari/Opera */
::-webkit-input-placeholder
::-webkit-input-placeholder
/* for Edge */
::-ms-input-placeholder
Leave a Comment