placeholderの色を変える、CSSでスタイルを付加する。

inputやtextareaのplaceholder属性に入力した文字列の色を変えたり、その他CSSでスタイルを付加する方法。

placeholderのスタイルは、基本的にinput自体のCSSを無視します。
以下のような疑似クラスでCSSによるスタイリングが可能です。

::-webkit-input-placeholder { color: #F00; }
:-moz-placeholder { color: #F00; }

特定の要素のplaceholderだけ変える場合:

input.search::-webkit-input-placeholder { color: #F00; }
input.search:-moz-placeholder { color: #F00; }

textarea::-webkit-input-placeholder { color: #F00; }
textarea:-moz-placeholder { color: #F00; }

font-size、font-weight、text-shadow、line-heightなど、テキスト装飾系は大抵効くようです。
実機検証は追々・・・。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です