テキストボックスのプレースホルダーのスタイルを変更する

スポンサーリンク

どうも、イソップです。

フォームの実装をしていると、プレースホルダーの文字色を変更したい、なんてことが結構ありますよね。

何度書いても忘れてしまうので、記事にしておきます。

プレースホルダー装飾用の疑似セレクタ

各ブラウザごとに選択の方法が用意されています。

::-webkit-input-placeholder { /* Chrome, Opera */
    color: #a0a0a0;
}

:-moz-placeholder { /* Firefox 19+ */
    color: #a0a0a0;
}

:-ms-input-placeholder { /* IE 10+ */
    color: #a0a0a0;
}

なかなかクールです。

指定できるプロパティ

プレースホルダーには、次のプロパティを指定できます。

  • font
  • color
  • background
  • word-spacing
  • letter-spacing
  • text-decoration
  • vertical-align
  • text-transform
  • line-height
  • text-indent
  • opacity

しかしすべてに適用できるわけではない模様。要検証ですね。

アニメーションとかできたら面白いかもしれませんね。

参考

::placeholder | CSS-Tricks


イソップへのお悩み相談募集中

イソップに相談しませんか?

当ブログで紹介しているような、Web制作やフリーランスへの悩みをイソップに相談してみませんか?
回答できることがあれば記事の中でご紹介します。