HTML & CSS

レシピ

フォーム

placeholder(プレースホルダー)属性のテキストカラーを変える

入力フォームに表示するプレースホルダーの文字色を変える方法について解説します。

この記事のポイント

  • 全ブラウザでプレースホルダーの文字色を変える

placeholder属性の色を変える

placeholder属性の色を変えるには、擬似要素「::placeholder」を使って指定します。

表示例
表示例

コード例

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では、先頭につく「:」の数だけ異なります。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。