最終更新日：
公開日：
レシピ
フォーム
placeholder(プレースホルダー)属性のテキストカラーを変える
入力フォームに表示するプレースホルダーの文字色を変える方法について解説します。
この記事のポイント
- 全ブラウザでプレースホルダーの文字色を変える
placeholder属性の色を変える
placeholder属性の色を変えるには、擬似要素「::placeholder」を使って指定します。
CSS コード例
input::placeholder,
textarea::placeholder {
color: #89abd4;
}
/* Edge */
input::-ms-input-placeholder,
textarea::-ms-input-placeholder {
color: #89abd4;
}
/* IE11 & IE10 */
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #89abd4;
}「::placeholder」だけだとMicrosoft Edge、およびInternet Explorerでは適用されないため、それぞれ専用の擬似要素を使用します。
EdgeとIEでは、先頭につく「:」の数だけ異なります。