HTML5のplaceholder属性のスタイル指定

placeholder属性はHTML5で規定された新しい属性なので、古いブラウザは対応していません。具体的には Internet Explorer 9 や Firefox 3.6, Opera 10.6 以前なのですが、FirefoxやOperaはともかくIE9以下で再現しなくてもよい案件はまだ多くないでしょう。

とはいえ、placeholder属性の使用が時期尚早というわけではなく、JavaScriptで「placeholder属性に対応していない場合のみスクリプトによる処理を実行する」ようにすれば問題ないと思います。以下判定コード例です。

if (!("placeholder" in document.createElement("input"))) {
  // placeholder属性に対応していない場合の処理
}

HTML5の仕様書にはこんな記述があります。

よって、textarea要素に複数行のプレースホルダーを表示することはできません。もっとも、そもそもプレースホルダーはa short hint (a word or short phrase)であるとされているので、改行を伴うような長い文章を記述するべきではないでしょう。

また、指定できるのはテキストのみなので、Googleカスタム検索などがやっている画像表示も不可能です。このような場合は従来どおりJavaScriptによる実装をするしかないでしょうね。

CSSで色やフォントを変更したいケースがあるかと思います。スタイルを変える場合、以下のような疑似要素または疑似クラスを指定します。

• ::-webkit-input-placeholder
• ::-moz-placeholder （Firefox 19以降）
• :-moz-placeholder （Firefox 18以前）
• :-ms-input-placeholder

注意したいのは、Operaはスタイル指定に対応していないこと、Firefoxは19から疑似要素となり、18以前の疑似クラス指定は効かなくなるということです。

• Firefoxの変更については、myakuraさんの記事 :-moz-placeholderから::-moz-placeholderに - fragmentary(myakura.hatenablog.com) が分かりやすいです。

また、認識するプロパティもブラウザによって差異があるようです。

• Styling the HTML5 placeholder | John Catterfeld's blog(blog.ajcw.com)

• ただし私の環境（元記事と同じWindows 7）で試したところ、 Chrome 23 での padding left/right や Firefox 17 での line-height が認識することを確認しました。

さらに、Firefox 19（Aurora版）では padding や border など、現行の17では認識するプロパティの一部が効きませんでした。正式版までには修正されるのか、そういう仕様なのかは分かりませんが…。