placeholderの文字スタイルを変えるCSS

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

See the Pen custom placeholder by webdev (@webdev-jp-net) on CodePen.0

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

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

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

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

<br />
input.color {<br />
	color: #4797BC;<br />
	font-weight: bold;<br />
	width: 100%;<br />
}<br />
input.sample::-webkit-input-placeholder {<br />
	color: #ccc;<br />
	font-weight: normal;<br />
}<br />
input.sample:-ms-input-placeholder {<br />
	color: #ccc;<br />
	font-weight: normal;<br />
}<br />
input.sample::-moz-placeholder {<br />
	color: #ccc;<br />
	font-weight: normal;<br />
}<br />

<br />
&lt;input class=&quot;color&quot; type=&quot;text&quot; placeholder=&quot;文字色を変えた入力欄&quot; /&gt;</p>
<p>&lt;input class=&quot;color sample&quot; type=&quot;text&quot; placeholder=&quot;文字色もプレースホルダー文字色も変えた入力欄&quot; /&gt;<br />

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

関連記事