どうも、イソップです。
フォームの実装をしていると、プレースホルダーの文字色を変更したい、なんてことが結構ありますよね。
何度書いても忘れてしまうので、記事にしておきます。
プレースホルダー装飾用の疑似セレクタ
各ブラウザごとに選択の方法が用意されています。
::-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
しかしすべてに適用できるわけではない模様。要検証ですね。
アニメーションとかできたら面白いかもしれませんね。