【CSS】placeholderの色を変更する方法

特にお問い合わせフォームなどで使用される、inputタグやtextareaタグの「placeholder」属性に対して、CSSを効かせて色を変更する方法を紹介します。

使用するのはCSSの疑似クラス『::placeholder』です。

例を以下に示します。

<input class="sample" type="text" placeholder="サンプルテキスト">

試しに、この要素の placeholder 属性の色を変えてみます。

.sample::-webkit-input-placeholder {
	color: #ff0000;
}

.sample::-moz-placeholder {
	color: #ff0000;
}

.sample:-ms-input-placeholder {
	color: #ff0000;
}

サンプルコードは上から、「Chrome & Safari」、「Firefox」、「IE」用の記述になっています。
擬似要素を指定するコロンの数が違うと適用されないので注意。

なお原因が不明なのですが、同じスタイルを適用するからという理由で、次のように要素の指定をまとめて記載すると、なぜかエラーになり狙い通りに描画されません。

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

この現象、原因がわかる方に理由をご教授いただきたい次第です。

SAMPLE : https://on-ze.com/demo/css-placeholder/