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


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

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31