CSSを使用したHTML5プレースホルダーのスタイル設定

HTML5には素晴らしい属性があります- プレースホルダー （入力要素のツールチップ）。 次のように設定されます。

<input type = "text" placeholder = "ここにテキストを入力してください" />

通常、このテキストはグレー表示されますが、このテキストをCSSでスタイルする必要があるとしましょう。

これまでのところ、これはGoogle Chrome、Safari、Firefoxでのみ可能です。Operaにはスタイルを設定する機能がまだなく、IEはそれをまったくサポートしていないためです。

WebkitとmozillaのCSSルール：

input::-webkit-input-placeholder {}
input:-moz-placeholder {}


これらのセレクターを1つに結合することはできないことを覚えておいてください。

input:-moz-placeholder,
input::-webkit-input-placeholder { }


CSSルールは機能しません。 また、webkitには2つのコロンを、mozillaには1つのコロンを記述する必要があることに注意してください。


さらにいくつかの例：

/* webkit */
#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder {
color:#090;
background:lightgreen;
text-transform:uppercase;
}
#field4::-webkit-input-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px; color:#999;
}

/* mozilla */
#field2:-moz-placeholder { color:#00f; }
#field3:-moz-placeholder {
color:#090; background:lightgreen;
text-transform:uppercase;
}
#field4:-moz-placeholder {
font-style:italic;
text-decoration:overline;
letter-spacing:3px;
color:#999;
}


また、ブラウザごとにプレースホルダのスタイルが異なることに注意してください。 たとえば、Firefoxでは背景色を設定できますが、Chromeでは設定できません。

プレースホルダー属性でサポートされているCSSスタイルのリスト：

	Chrome 10（Win 7）	Chrome 11（Win 7）	Firefox 4（Win 7）	Safari 3.1（Win XPおよびOS X）	Safari 5（Win 7およびOS X）	Opera 11（Win 7）
背景色	いや	いや	+	いや	+	いや
ボーダー	いや	いや	+	いや	+	いや
色	+	+	+	いや	+	いや
フォントサイズ	+	+	+	いや	+	いや
フォントスタイル	+	+	+	いや	+	いや
フォントの太さ	+	+	+	いや	+	いや
文字間隔	+	+	+	いや	+	いや
行の高さ	いや	いや	いや	いや	いや	いや
パディングトップ/ボトム	いや	いや	+	いや	+	いや
左/右のパディング	いや	いや	+	いや	いや	いや
テキスト装飾	いや	いや	+	いや	+	いや
テキスト変換	いや	いや	+	いや	+	いや