HTML5のplaceholder属性のスタイル指定
HTML5では、input要素とtextarea要素にplaceholder属性を記述することでプレースホルダーを設定することができます。
IE10のリリースにより一通り実装ブラウザが揃ったところで、placeholder属性を使う際の注意点などをまとめてみたいと思います。
古いブラウザはJavaScriptで対応
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では認識するプロパティの一部が効きませんでした。正式版までには修正されるのか、そういう仕様なのかは分かりませんが…。
文字色の変更
CSSでのスタイル設定でもっとも多いケースが文字色の変更だと思います。デフォルトではどのブラウザも灰色文字で表示されるのですが、色合いは統一されていません。
- Firefox 17 → color: #6D6D6D
- Firefox 19 → opacity: 0.54
- Google Chrome 23 → color: #A9A9A9
- Internet Explorer 10 → #666666
- Opera 12.1 → color: #6D6D6D
Firefox 19は色でなく透明度の設定となっています。これは文字色だけ設定して背景色を指定しないときに起こりうるアクセシビリティ上の問題への配慮、また数値が 0.54 と中途半端なのは、黒文字(#000000)においてWCAG 2.0の達成基準1.4.3 Contrast (Minimum)で規定されているコントラスト比 4.5:1 を満たすギリギリの値であることから決められたものと思われます。
- 556145 – Placeholder text default style should use opacity instead of GrayText(
bugzilla.mozilla.org
) - 618260 – Consider alternative placeholder styling since GrayText lacks contrast with various OS themes(
bugzilla.mozilla.org
)
いずれにしても、 ::-moz-placeholder を記述する際は注意したいですね。