placeholderについてのTIPS
サポートしているタグ
input(type=text, password, search, url, tel, email), textareaで使える。
DOCTYPEはHTML5じゃなくても問題ない。
サポートしているブラウザ
主要なブラウザは問題なく使えるが、IEは10からサポートされた。
スタイルを指定しないときの見た目
文字が黒いと、どのブラウザでも以下の感じで薄いグレーで表示される。
ブラウザによる違い
FireFoxは単純に薄いグレーの文字を設定しているのではなく、color
で指定した色をopacity:0.4
して表示するようで、黒以外の文字でも薄く表示されます。
Chromeは文字色に関係なく、常に薄いグレーの文字を表示している様子。
IEはIE11で試したところ、color
が黒以外の場合は、薄くならずそのままの色でプレースホルダーが表示された。入力した文字なのかプレースホルダーなのか見分けは付かない感じ。
スタイルの変更方法
標準のセレクタは存在しないため、ベンダーごとにスタイルを指定しないといけないのでとても面倒くさい。
Operaはスタイルを指定できないみたい。
/*Webkit*/ ::-webkit-input-placeholder{ color: #ccc; } /*Firefox 18以前(古い書き方なので使っちゃダメ) */ :-moz-placeholder { color: #ccc; } /*Firefox 19以降*/ ::-moz-placeholder { color: #ccc; opacity: 1; } /*IE10以降*/ /* http://msdn.microsoft.com/en-us/library/ie/hh772745(v=vs.85).aspx */ :-ms-input-placeholder { color: #ccc; }
FireFox19以降はコロン1つから2つに変更されているので要注意です。
ネット検索するとコロン1つの情報の方が多数ヒットするので惑わされないように。
あと、前述したとおりFireFoxはopacity:0.4
されてしまうので、opacity:1
で明示的に戻してやらないと字が薄くなりすぎます。
ちなみに、カンマ区切りでグループ化するとなぜか有効にならないようです。
::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, :-moz-placeholder { color: yellow; }
文字色以外のスタイルは効く?
font-size、font-weight、text-shadow、line-heightなど、テキスト装飾系は大抵効くようです。
::-webkit-input-placeholder{ color: #f00; font-size: 50%; font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif; font-weight: bold; font-style: italic; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.5em; } ::-moz-placeholder{ color: #0f0; font-size: 50%; font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif; font-weight: bold; font-style: italic; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.5em; } :-ms-input-placeholder{ color: #00f; font-size: 50%; font-family: serif, 'Helvetica', 'Arial', 'メイリオ', 'Meiryo', 'MS PGothic', sans-serif; font-weight: bold; font-style: italic; text-decoration: underline; text-transform: uppercase; letter-spacing: 0.5em; }
IE9以前のバージョンでも使いたい
うちのシステムはIE7〜9もサポートしているため、ah-placeholderというjQueryプラグインを使わせてもらっています。
このプラグインではデフォルトの文字色がsilver(#C0C0C0)だが、placeholderColor
オプションで色を変更可能。
デフォルトではtitle属性の値がプレースホルダーとして表示し、placeholder属性は使わず、このプラグインだけで全てのブラウザに対応可能。
placeholderAttr
オプションでplaceholder属性を使うように変更すると、placeholderをサポートしていないブラウザの場合だけ動作するように変更できる。
Macだとフォーカス時の動きが違う
通常はテキストにカーソルを移動した時点でプレースホルダーが消えるのだが、Mac OSとかiOSとかAppleのOSではカーソルを置いただけでは消えず、文字入力した時点で消える。
ah-placeholderはlikeApple
オプションでどちらでも選択可能。