技術メモのかけら

内容はもとより調べたことすら忘れてしまうので個人的な技術メモを残しているブログです。Qiitaの記事にするほどでもない細かいネタを投稿します。

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つの情報の方が多数ヒットするので惑わされないように。
あと、前述したとおりFireFoxopacity: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オプションでどちらでも選択可能。

参考

http://css-tricks.com/almanac/selectors/p/placeholder/