プレースホルダーのCSS変更

Question

プレースホルダーのCSS変更についてですが、これ以上に必要なものは何かありますか？

これで効かないのはどのような原因が考えられるでしょうか？

<style>
#ex:placeholder-shown, 
#ex::-webkit-input-placeholder, /* Google Chrome, Safari, Opera 15+, Android, iOS */
#ex:-moz-placeholder, /* Firefox 18- */
#ex::-moz-placeholder, /* Firefox 19+ */
#ex:-ms-input-placeholder { /* IE 10+ */
    color: red !important;
}
</style>

<textarea id="ex" placeholder="この色を変えたい"></textarea>

Answer 1

まとめて定義していることが問題かと思います。Firefoxでは#ex:-ms-input-placeholderを削除すれば表示されました。

【placeholder のブラウザごとの違い＆その対処法など - Qiita】
https://qiita.com/myzkyy/items/54c19077f95f0fc1a19a#%E8%89%B2%E3%82%92%E5%A4%89%E3%81%88%E3%82%8B

なお、定義しているスタイルが同じものについては、セレクタまとめてカンマ区切りで書けば良いじゃないかという気もしますが、そうすると動かなくなります。カンマ区切りで記載している複数のセレクタの中でひとつでも（そのブラウザにとって）無効な擬似クラス・擬似要素セレクタが含まれていると、全部無効扱いになります。

【不明なCSSセレクター - Hail2u】
https://hail2u.net/blog/webdesign/unknown-css-selector.html

【::placeholder - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/::placeholder

【:placeholder-shown - CSS: カスケーディングスタイルシート | MDN】
https://developer.mozilla.org/ja/docs/Web/CSS/:placeholder-shown

Comments

[gonsy]

知りませんでした。迅速なご回答に感謝いたします。