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

2016年02月13日
follow us in feedly

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

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

スクリーンショット_2016-02-13_18_09_56

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

表示方法はいたって簡単で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の便利さを享受するにはやっかいなことになるんだろうな。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ