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の色を変更するデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

2件のコメント

  1. […] placeholderの文字色を変更する | cly7796.net […]

  2. […] placeholderの文字色を変更する | cly7796.net […]

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2021年11月
 123456
78910111213
14151617181920
21222324252627
282930