プレースホルダーのスタイルにおけるノーマリゼーション

テキスト入力コントロールにplaceholder属性を使って入力例を表示することができるようになってから、もうかなりの年月がたった。悪用されてもいるが、わかりやすいフォームには不可欠になりつつある程度には浸透したと言ってよいだろう。ただMozilla Developer Networkのグローバル・ナビゲーションに設置されている検索フォームのようにそのスタイリングに失敗しているケースはままある(Chrome 43だと入力済みかどうかまったく判断できない)。そういった失敗を極力減らすためには、Firefoxのようにopacityプロパティーを使ってノーマライズしてやるのが良いだろう。

ではFirefoxの挙動に合わせるようにノーマリゼーションする場合はどのようにCSSを書くことになるのだろうか。

Firefoxではユーザー・エージェントCSSでopacityの値に0.54を指定している(以前は0.4だったようだが、Firefox 38では0.54のようだ)。これと他のブラウザー及びウェブ標準での挙動を合わせるためには以下のように書く必要がある。

/*
::-moz-placeholder {
  color: inherit;
  opacity: .54;
}
*/

:-ms-input-placeholder {
  color: inherit;
  opacity: .54;
}

::-webkit-input-placeholder {
  color: inherit;
  opacity: .54;
}

:placeholder-shown {
  opacity: .54;
}

プレースホルダー文字列のスタイルは、Internet Explorer 10以降では:-ms-input-placeholder擬似要素擬似クラスで、ChromeやSafariでは::-webkit-input-placeholder擬似要素、そしてSelectors Level 4となることになるウェブ標準仕様では:placeholder-shown擬似クラスになる予定で、それぞれ行うことができる。ウェブ標準では擬似クラスになっていることは頭の隅に入れておいた方がよいが、まだこれに従った実装はない。

現行ブラウザー群の実装では擬似要素になっていることと、Internet ExplorerやChromeで決め打ちで色が指定されていることから、colorプロパティーをinheritにしておく(initialでも悪くない)。ウェブ標準では擬似クラスのためcolorプロパティーをinheritにする必要はなくなる。不明なセレクターによるルールセットの無視が起こらないように、それぞれのルールセットは別々に記述していく必要がある。

Firefoxの挙動に合わせるので::-moz-placeholder擬似要素の記述は不要だが、コメントで残しておいた。

Firefoxが単にgrayTextキーワードや特定の色を指定しないようになった理由には、ユーザーの設定やテーマの設定によりフォーム要素の背景が何色になるか変化するからなどいくつかの理由は思い当たる。最適解ではない(制作者が色を指定したい時にopacityプロパティーを戻さなければならない)が、悪くはないデフォルト値ではあるだろう。

ウェブサイト制作者サイドから見てドキュメントのCSSでもopacityプロパティーを使う理由はあまりない。しかしユーザー側から見ると常に入力テキストよりもコントラストが下がった色でプレースホルダー文字列が表示されるということはそれなりにメリットがあると考えられる。ユーザーは入力例はグレーの文字列で表示されているというよりも、薄い色の文字で表示されていると捉えているからだ。

フォーム要素の前景色と背景色のコントラストが十分に確保されているという前提だと、プレースホルダー文字列の色は色相は変えずコントラストを落とすだけにするのがもっともわかりすい。色相を変えてしまうと特別な意味や機能が存在するように捉えられる可能がある上、デフォルトの薄い文字という感覚からかけ離れてしまう。もちろんそれぞれのウェブサイトのカラースキームを元にして完璧な色を追求するのも良いが、多くの場合はopacityプロパティーをうまく使ってノーマリゼーションというレベルで行うだけで十二分に機能させることが可能だろう。

追記

Internet Explorer 10以降では:-ms-input-placeholder擬似クラスだった。修正し、サンプル・コードも修正しておいた。