placeholder のブラウザごとの違い＆その対処法など

HTML5で追加されたフォーム部品（しかしXHTMLでもみんな平気で使っていたりする）の placeholder について、少しだけ細かい話をまとめます。

未対応ブラウザ

おそらく現状で気にする必要がある未対応ブラウザは、IE8・9くらいだと思います。もしバージョン4未満の Android に対応する必要がある場合はさらに色々と細かい話がありますが、長くなるのでここでは省きます。

placeholder 属性をIE8・9でも有効にするためのプラグインはいくつかあるので、適当なものをIE9以下の場合だけ使用するように記述すると良いです。たとえば筆者は以下の jQuery プラグインを使っています。
https://github.com/mathiasbynens/jquery-placeholder
このプラグインの使い方は簡単で、jquery.placeholder.min.js を配置して、HTMLの

内で以下のように記述するだけです。

    <!--[if lte IE 9]>
        <script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
        <script>
        $(function () {
            $('input, textarea').placeholder();
        });
        </script>
    <![endif]-->
    <style>
        .placeholder {
            /* 色を変えたければ .placeholder に対してスタイルを指定 */
            /* このクラス名は変更可能。詳しくはマニュアル参照 */
            color: #aaa;
        }
    </style>

プラグインによっては未入力状態に submit を押下すると placeholder まで送信されてしまうものがあるので、このあたりは要注意。フォーム関連で JavaScript を実装している場合、実装と競合が発生しないかは念のため確認しましょう。

色を変える

placeholder の色はブラウザによって異なります。
ブラウザによって適用可能なスタイルには違いがあるようですが、少なくとも文字色は placeholder に対応している現在主要なブラウザでは指定できるようです。

    /* Webkit */
    ::-webkit-input-placeholder {
        color: #f00;
        opacity: 1;
    }
    /* Firefox 18 以前 */
    :-moz-placeholder {
        color: #f00;
    }
    /* Firefox 19 以降 */
    ::-moz-placeholder {
        color: #f00;

        /* Firefox 19 以降のデフォルトでは */
        /* color ではなく opacity で色合いを調整しているため */
        /* 文字色を指定する場合、opacity を 1 にする必要がある */
        opacity: 1;
    }
    /* IE 10 以降 */
    :-ms-input-placeholder {
        color: #f00;
    }
    /* CSS4では以下のような名前の擬似クラスになるらしい */
    /* おそらく今のところ対応ブラウザはない */
    :placeholder-shown {
        color: #f00;
    }

多くのサイト・投稿では、Firefox 19 以降の仕様をよく理解せず、単に color だけ指定しているケースが見受けられますが、同じ色にするためには opacity を1に設定する必要があります。ちなみにデフォルトの opacity は0.54です（0.5だとコントラストが低すぎるようで微妙な数字になったようです）。

なお、定義しているスタイルが同じものについては、セレクタまとめてカンマ区切りで書けば良いじゃないかという気もしますが、そうすると動かなくなります。カンマ区切りで記載している複数のセレクタの中でひとつでも（そのブラウザにとって）無効な擬似クラス・擬似要素セレクタが含まれていると、全部無効扱いになります。
→（参考サイト） 不明なCSSセレクター (Hail2u.net)

なお、input や textarea などのフォーム部品に color を設定した場合、IE10, 11 や Firefox 19～ はその色が placeholder にも継承されるのに対し、Chrome では継承されません。上記のように placeholder のスタイルを指定していれば問題はないかと思いますが、もし Firefox での動作にあわせたい場合は、以下サイトが参考になります。
→（参考サイト） プレースホルダーのスタイルにおけるノーマリゼーション (Hail2u.net)

フォーカス時の動作

IE10, IE11ではフォーカス時に placeholder の表示が消えますが、Chrome、 Firefox、Safari などでは、文字を入力するまで表示され続けます。
IE10, IE11をChromeなどと同じ挙動にしたい場合、JavaScriptを使うしかありません。

逆にIE以外（ここではWebkitとFirefoxを想定）をIEと同じような動作にすることは、CSSで可能です。

    /* Webkit */
    :focus::-webkit-input-placeholder {
        color: transparent;
    }
    /* Firefox 18 以前 */
    :focus:-moz-placeholder {
        color: transparent;
    }
    /* Firefox 19 以降 */
    :focus::-moz-placeholder {
        color: transparent;
    }

textarea の placeholder で改行

改行コードを実体参照で挿入すると実現できることもあります。
たとえば [CR][LF] = 
 なので…

<input type="text" name="..." placeholder="1行目&#13;&#10;2行目">

といった感じで書くと、IE10やChromeなどでは改行されます。
ただし、Firefoxなど一部のブラウザは対応していないようです。
クロスブラウザ対応するには、CSSやJavaScriptなどでどうにかするしかなさそうです。

【おまけ】placeholder の値について

入力例、簡単な説明文、入力フォーマットの指示など、placeholder で使用する値は様々だと思いますが、文字が入力されていると表示されないので、重要な説明を書くのは避けましょう。
たとえば以下のように、項目名を説明するラベルのかわりに placeholder を使用するケースがしばしば見受けられます。

<input type="text" name="name" placeholder="ユーザーID（アルファベットまたは数字）">
<input type="text" name="address" placeholder="ユーザー名（12文字以内）">
<textarea name="phone" placeholder="自己紹介（800文字以内）" rows="6">

このように placeholder を使用すると、入力中に「あれ？　これって何の項目って何だったっけ？」「どの文字を使って良いんだったっけ？」となるかもしれません。
ラベルを省略できるのでデザインをしやすいということはあるかもしれませんが、しかし、基本的には placeholder がなくても利用に支障がないように制作すべきです。

特に、「編集画面」で既にフォームに値が入っていて入力値を消さないと何の項目なのかわからない、IE9以下への対策をしていないのでIE9以下では謎のフォーム部品が並んでいるだけ…というのは非常に良くないパターンです。

フォームを使いやすくするための機能で、かえって使いにくいという状況を引き起こさないように、placeholder は注意して使いましょう。