【CSS】placeholderの色を変更する方法
Ads by Google
inputタグやtextareaタグで使う「placeholder」属性にCSSを効かせる方法を紹介します。
テストHTMLは以下。
<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; }
この現象、原因がわかる方に理由をご教授いただきたい次第です。
こちらの記事もいかがですか?
アナタにオススメ!
同じカテゴリーの他の記事です。
Ads by Google