input要素のplaceholder属性へのスタイル適用

html5で新しく多くの便利な要素や属性が実装されますが、input要素のplaceholder属性も全ブラウザへの速やかな実装が期待されているものだと思います。placeholderはinputやtextareaに、要素が空欄の時にだけ表示する文字列をvalueとは別に指定する属性です。

以下のように使います。

<input type='text' placeholder='ここに文字列'>

<textarea placeholder='ここに文字列'></textarea>

で、このplaceholderの文字列にスタイルを指定する方法が分からなかったので調べてみました。こういうふうに書くようです。

<style type='text/css'>
input::-webkit-input-placeholder {
  color:#F00;
}
input:-moz-placeholder {
  color:#F00;
}
</style>

chrome、safari、Firefox4で見ると赤く表示されています。webkit向けのセレクタの書き方は、“:”が1個ではなく2個です。input:-webkit-input-placeholderだと動きません。input::-webkit-input-placeholderです。

2011年5月27日現在、IE9はplaceholderに非対応なので、スタイルを指定する方法も当然ありません。operaはinputのみplaceholderに対応しています。が、スタイルを効かせる方法はありません。