placeholderの文字色を変更する
CSSでplaceholderとして表示している文字列のカラーを変更する方法です。
標準版とブラウザ毎のベンダープレフィックス版がありますが、今のところは、両方とも記述した方が良さそうです。
コード
/* 標準版 */
:placeholder-shown {color: red;}
/* Google Chrome, Safari, Opera 15+, Android, iOS */
::-webkit-input-placeholder {color: red; }
/* Firefox 18- */
:-moz-placeholder {color: red; opacity: 1; }
/* Firefox 19+ */
::-moz-placeholder {color: red; opacity: 1; }
/* IE 10+ */
:-ms-input-placeholder {color: red; }
動作確認したブラウザは、Chrome 55、Firefox 51、Safari 10.0、Edge 38 の４つ。
上記ブラウザのうち、標準版として動作したのはFirefoxのみで、Edgeは「::-webkit-input-placeholder」で動作しました。
まだまだベンダープレフィックスは必要そうです。
最近、flexboxやアニメーションなどの利用が増えてきたためか、ベンダープレフィックスを付けるのが面倒になってきました。ベンダープレフィックスを自動でつけてくれるらしい？ Autoprefixerというのがあるようなのでwebpackを利用して使ってみたいです。