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）
背景色	いや	いや	+	いや	+	いや
ボーダー	いや	いや	+	いや	+	いや
色	+	+	+	いや	+	いや
フォントサイズ	+	+	+	いや	+	いや
フォントスタイル	+	+	+	いや	+	いや
フォントの太さ	+	+	+	いや	+	いや
文字間隔	+	+	+	いや	+	いや
行の高さ	いや	いや	いや	いや	いや	いや
パディングトップ/ボトム	いや	いや	+	いや	+	いや
左/右のパディング	いや	いや	+	いや	いや	いや
テキスト装飾	いや	いや	+	いや	+	いや
テキスト変換	いや	いや	+	いや	+	いや