placeholderの文字色を変更する

placeholderの文字色を変更する方法をメモ。

対応ブラウザ

対応ブラウザはこちら
ベンダープレフィックスを付与することで主要なブラウザは概ね対応できそうです。
　

サンプルコード

.errorが付いているときに文字色を赤色にするようにしてみます。

HTML

<input class="error" type="text" name="name" placeholder="お名前" />
<input type="text" name="address" placeholder="住所" />

CSS

.error::-webkit-input-placeholder {
	color: #ff0000;
}
.error:-ms-input-placeholder {
	color: #ff0000;
}
.error::-moz-placeholder {
	color: #ff0000;
}
.error::-placeholder {
	color: #ff0000;
}

placeholderの色を変更するデモページ
　

【参考サイト】

• placeholderの文字色を変えるcss – wevdev
• placeholder属性の文字色を変更する | IT女子のお気に入りフォルダ