placeholderの見た目を変えたいときの備忘録

HTMLのformパーツ定番のinputなどに使えるplaceholder属性の見た目を調整する際に使用するセレクタめも。

これでfont-sizeとか諸々のスタイルを編集出来ます。

/* Chrome, Safari */
::-webkit-input-placeholder { }
/* Firefox 18- */
:-moz-placeholder { }
/* Firefox 19+ */
::-moz-placeholder { }
/* IE 10+ */
:-ms-input-placeholder { }

ちなみに、

/* セレクタまとめたい症候群 */
::-webkit-input-placeholder,
:-moz-placeholder,
::-moz-placeholder,
:-ms-input-placeholder { }

cssを書き慣れている人だと上のようにセレクタはカンマ区切りでまとめたくなりますが、
この書き方だとスタイルが適用されません。

慣れていてもすぐ忘れがちなハマりポイントなので要注意!