chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

placeholderに装飾をする場合

ちょうどform周りの実装をしていて、placeholderにオリジナルの色を付けたい時にどうしたらいいのだろうと思い、調べたら簡単にできました。 ちなみに端末や、ブラウザによってplaceholderの文字色はそれぞれ違う設定になっています。

例)
::-webkit-input-placeholder {
  color: red;
}

::-moz-placeholder {
  color: red;
}

:-ms-input-placeholder {
  color: red;
}

chrome/safari/firefox/ie用のベンダープレフィックスを付けて設定してください。

これで文字色以外にも色々手を加える事ができそうですね。