プレースホルダーテキストとはお問い合わせフォームなどの入力欄に事前に薄字で表示されている説明文のことです。

例えばこんなの。入力のためにクリックすると消えるヤツです。

あらかじめ入力欄に今から入力する内容についてのヒントを入れることでユーザーの使い勝手を良くしています。

表示方法はいたって簡単でHTML5で導入されたplaceholder属性をinput要素などに追記します。

<input type="email" name="email" placeholder="メールアドレスをご入力ください" />

使えるのはtype属性の値が text、tel、url、search、email の場合だけです。それ以外に追記しても無視されます。

プレースホルダーテキストにCSSを適用する

ブラウザに応じてCSSをあてるセレクタが違うので、基本的には3種類のセレクタ設定する必要があります。

 ブラウザ対応状況

Internet Explorer

.contact-form :-ms-input-placeholder {
}

Google chromeとSafari

.contact-form ::-webkit-input-placeholder {
}

Firefox

.contact-form ::-moz-placeholder {
}

上記の各ブラウザに実装されたセレクタは例え記述するプロパティと値が同じでも、セレクタをカンマ区切りで一気に書くとcssが効きません。面倒ですね。

しかもIEはコロンの数が一つだったり(*Edgeはコロン2つ)やfirefoxのセレクタにはinputの表示が無かったり、記述ミスを起こしそうな要素が満載なので注意が必要です。

■さいごに

現在は各ブラウザがバラバラの仕様で実装していますが、セレクタが大きく拡張され便利になりそうなcss4ではこのような感じで統一されそうな流れです。

:placeholder-shown {
}

でもどうせブラウザの対応が遅れて、css4の便利さを享受するにはやっかいなことになるんだろうな。