placeholderの文字色を変えるcss

上が、cssで文字に装飾をくわえたinputで
下は、文字の装飾 + placeholderのスタイルも設定したinputです。

inputの文字にスタイルを指定すると
IEでは、placeholderにも全く同じスタイルが適用されてしまい。
FirefoxやGoogle、Safariでは、placeholderの色はブラウザデフォルトのままで
ボールドなどの装飾はIE同様に適用されてしまいます。

placeholderだけに別のスタイルを適用するときは
ブラウザにあわせて3種類の指定をします。

::-webkit-input-placeholder
:-ms-input-placeholder
::-moz-placeholder

擬似要素をあらわすコロンの数がちがうと適用されないので注意。

input.color {
	color: #4797BC;
	font-weight: bold;
	width: 100%;
}
input.sample::-webkit-input-placeholder {
	color: #ccc;
	font-weight: normal;
}
input.sample:-ms-input-placeholder {
	color: #ccc;
	font-weight: normal;
}
input.sample::-moz-placeholder {
	color: #ccc;
	font-weight: normal;
}
<input class="color" type="text" placeholder="文字色を変えた入力欄" />

<input class="color sample" type="text" placeholder="文字色もプレースホルダー文字色も変えた入力欄" />

参考:
:-ms-input-placeholder pseudo-class (Internet Explorer)
::-moz-placeholder

関連記事

Pocket