inputやtextareaなどのplaceholderのCSSスタイルを変更する方法的なお話

HTML5から使えるplaceholderは中々便利だけど、たまに文字が見にくかったりしてちょっといらいらしてしまう。
そういうときに他の色に変えられたらなぁっていう事があるんだけど、
CSSでinputの要素とかにそういったものを指定するところはなかったりする。

けどまぁそういうときにベンダープレフィックスな疑似要素を使ってあげれば出来たりする。
ということで今日はその設定のお話をば。

.form-control::-webkit-input-placeholder{
  color:#eee;
}
.form-control:-ms-input-placeholder{
  color:#eee;
}
.form-control::-moz-placeholder{
  color:#eee;
}

面倒だからbootstrap3のform-controlクラスを持つもの全てに対して指定しているけど、
これで大体のブラウザから見た際にかなりplaceholderの文字が薄く見えるという感じになる。
background-colorやfont-sizeも指定出来るので、文字が入力されていないときは！みたいなことも簡単に出来る。
ちなみにベンダー(ブラウザ)によってコロンの数が違ったりするので要注意。

ただ一点だけ色々と試してみたところ面倒なことがあった。
CSSでは基本的にカンマで区切るとまとめて指定する事が出来るんだけど、これについては対応されていなかった。

//ダメな例
.form-control::-webkit-input-placeholder,
.form-control:-ms-input-placeholder,
.form-control::-moz-placeholder{
  color:#eee;
}

こんな感じ。
多分ベンダープレフィックスな要素だからなのかもしれないけど、
とりあえずplaceholder時のCSSをカンマでまとめると適用されないので要注意。


ってことで意外と知らなかったりするけど便利なplaceholder時のCSS操作。
placeholder時と通常時の文字の差をはっきりさせることで、
ユーザーに入力済みと誤解させないようにするということがこれでしっかりと出来るよ的なみたいな。