フォームウィジェット向けプロパティ実装状況一覧

以下の実装状況一覧表で、HTML フォーム向けの CSS サポート状況を要約しています。HTML フォームや CSS の複雑さにより、これらの表は完全なリファレンスであるとはいえません。それでも、何ができて何ができないかの見識を得られるでしょう。また、どうすればよいかを知る助けにもなるでしょう。

表の見方

値

それぞれのプロパティで取り得る値は 4 種類あります:

YES: プロパティは各ブラウザ間で、一貫してほどよくサポートされています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。
PARTIAL: プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。
NO: プロパティは動作しない、または頼りにできるほどの一貫性がありません。
N.A.: 当該ウィジェットに対して、そのプロパティは意味がありません。

レンダリング

それぞれのプロパティで可能なレンダリング方法は 2 種類あります:

N (Normal): プロパティをそのまま適用することを表します。
T (Tweaked): 下記の追加ルールとともにプロパティを適用することを表します:

* {
/* これは、WebKit ベースのブラウザでネイティブのルックアンドフィールを無効にします */
  -webkit-appearance: none;

/* これは、Gecko ベースのブラウザでネイティブのルックアンドフィールを無効にします */
  -moz-appearance: none;

/* これは Opera、Internet Explorer、Firefox など、その他いくつかのブラウザでネイティブの 
   ルックアンドフィールを無効にします */
  background: none;
}

実装状況一覧表

全体的な動作

全体的なレベルで多くのブラウザに共通する動作があります:

border, background, border-radius, height: これらのプロパティのいずれかを使用すると、一部のブラウザでネイティブのルックアンドフィールが部分的に、あるいは全面的に無効になることがあります。これらを使用する際は注意してください。
line-height: このプロパティのサポート状況は各ブラウザ間で一貫性がありませんので、避けるべきでしょう。
text-decoration: Opera ではこのプロパティが、フォームウィジェットでサポートされていません。
text-overflow: Opera、Safari および IE9 ではこのプロパティが、フォームウィジェットでサポートされていません。
text-shadow: Opera は text-shadow をフォームウィジェットでサポートしていません。また、IE9 はまったくサポートしていません。

テキストフィールド

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Partial^[1][2]	Yes	WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none` を使用することが必要です。 Windows 7 で Internet Explorer 9 は、`background:none` が適用されなければボーダーを適用しません。
`border`	Partial^[1][2]	Yes	WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none` を使用することが必要です。 Windows 7 で Internet Explorer 9 は、`background:none` が適用されなければボーダーを適用しません。
`margin`	Yes	Yes
`padding`	Partial^[1][2]	Yes	WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none` を使用することが必要です。 Windows 7 で Internet Explorer 9 は、`background:none` が適用されなければボーダーを適用しません。
テキストとフォント
`color`^[1]	Yes	Yes	`border-color` プロパティが設定されていない場合、一部の WebKit ベースブラウザは `<textarea>` において、フォントだけでなくボーダーにも `color` プロパティを適用します。
`font`	Yes	Yes	`line-height` の注意事項をご覧ください。
`letter-spacing`	Yes	Yes
`text-align`	Yes	Yes
`text-decoration`	Partial	Partial	Opera に関する注意事項をご覧ください。
`text-indent`	Partial^[1]	Partial^[1]	IE9 はこのプロパティを `<textarea>` のみで、Opera は単一行のテキストフィールドのみでサポートしています。
`text-overflow`	Partial	Partial
`text-shadow`	Partial	Partial
`text-transform`	Yes	Yes
ボーダーと背景
`background`	Partial^[1]	Yes	WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none` を使用することが必要です。Windows 7 で Internet Explorer 9 は、`background:none` が適用されなければボーダーを適用しません。
`border-radius`	Partial^[1][2]	Yes	WebKit ブラウザは (主に Mac OSX や iOS で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none` を使用することが必要です。Windows 7 で Internet Explorer 9 は、`background:none` が適用されなければボーダーを適用しません。 Opera では、明示的にボーダーが設定されている場合にのみ `border-radius` が適用されます。
`box-shadow`	No	Partial^[1]	IE9 はこのプロパティをサポートしません。

ボタン

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Partial^[1]	Yes	Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。
`border`	Partial	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Yes	Mac OSX や iOS では、WebKit ベースブラウザでこのプロパティが適用されません。
テキストとフォント
`color`	Yes	Yes
`font`	Yes	Yes	`line-height` の注意事項をご覧ください。
`letter-spacing`	Yes	Yes
`text-align`	No	No
`text-decoration`	Partial	Yes
`text-indent`	Yes	Yes
`text-overflow`	No	No
`text-shadow`	Partial	Partial
`text-transform`	Yes	Yes
ボーダーと背景
`background`	Yes	Yes
`border-radius`	Yes^[1]	Yes^[1]	Opera では、明示的にボーダーが設定されている場合にのみ `border-radius` が適用されます。
`box-shadow`	No	Partial^[1]	IE9 はこのプロパティをサポートしません。

数値

number ウィジェットを実装するブラウザでは、フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Partial^[1]	Partial^[1]	Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。
`border`	Yes	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Partial^[1]	Opera ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。
テキストとフォント
`color`	Yes	Yes
`font`	Yes	Yes	`line-height` の注意事項をご覧ください。
`letter-spacing`	Yes	Yes
`text-align`	Yes	Yes
`text-decoration`	Partial	Partial
`text-indent`	Yes	Yes
`text-overflow`	No	No
`text-shadow`	Partial	Partial
`text-transform`	N.A.	N.A.
ボーダーと背景
`background`	No	No	サポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
`border-radius`	No	No
`box-shadow`	No	No

チェックボックスとラジオボタン

プロパティ	N	T	備考
CSS ボックスモデル
`width`	No^[1]	No^[1]	一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。
`height`	No^[1]	No^[1]	一部のブラウザでは、マージンを追加したりウィジェットを引き伸ばしたりします。
`border`	No	No
`margin`	Yes	Yes
`padding`	No	No
テキストとフォント
`color`	N.A.	N.A.
`font`	N.A.	N.A.
`letter-spacing`	N.A.	N.A.
`text-align`	N.A.	N.A.
`text-decoration`	N.A.	N.A.
`text-indent`	N.A.	N.A.
`text-overflow`	N.A.	N.A.
`text-shadow`	N.A.	N.A.
`text-transform`	N.A.	N.A.
ボーダーと背景
`background`	No	No
`border-radius`	No	No
`box-shadow`	No	No

セレクトボックス (単一行)

Firefox では <select> 要素の下向き矢印ボタンを変更する方法がありません。

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Partial^[1]	Partial^[1]	このプロパティは `<select>` 要素では問題ありませんが、`<option>` 要素や `<optgroup>` 要素では効果がありません。
`height`	No	Yes
`border`	Partial	Yes
`margin`	Yes	Yes
`padding`	No^[1]	Partial^[2]	プロパティは適用されますが、Mac OSX ではブラウザ間の一貫性がありません。このプロパティは `<select>` 要素には適用されますが、`<option>` 要素や `<optgroup>` 要素では処理に一貫性がありません。
テキストとフォント
`color`	Partial^[1]	Partial^[1]	Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティをサポートせず、また `<option>` 要素や `<optgroup>` 要素では Opera を含めてまったくサポートしません。
`font`	Partial^[1]	Partial^[1]	Mac OSX では、WebKit ベースのブラウザがネイティブウィジェットでこのプロパティをサポートせず、また `<option>` 要素や `<optgroup>` 要素では Opera を含めてまったくサポートしません。
`letter-spacing`	Partial^[1]	Partial^[1]	IE9 は `<select>`、`<option>` および `<optgroup>` 要素でこのプロパティをサポートしません。Mac OSX で WebKit ベースのブラウザは、`<option>` 要素や `<optgroup>` 要素でこのプロパティをサポートしません。
`text-align`	No^[1]	No^[1]	Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティをサポートしません。
`text-decoration`	Partial^[1]	Partial^[1]	Firefox のみがこのプロパティをフルサポートしています。Opera はこのプロパティをまったくサポートせず、また他のブラウザは `<select>` 要素のみでサポートします。
`text-indent`	Partial^[1][2]	Partial^[1][2]	ほとんどのブラウザは、`<select>` 要素のみでこのプロパティをサポートします。 IE9 はこのプロパティをサポートしません。
`text-overflow`	No	No
`text-shadow`	Partial^[1][2]	Partial^[1][2]	ほとんどのブラウザは、`<select>` 要素のみでこのプロパティをサポートします。 IE9 はこのプロパティをサポートしません。
`text-transform`	Partial^[1]	Partial^[1]	ほとんどのブラウザは、`<select>` 要素のみでこのプロパティをサポートします。
ボーダーと背景
`background`	Partial^[1]	Partial^[1]	ほとんどのブラウザは、`<select>` 要素のみでこのプロパティをサポートします。
`border-radius`	Partial^[1]	Partial^[1]
`box-shadow`	No	Partial^[1]

セレクトボックス (複数行)

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Yes	Yes
`border`	Yes	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Partial^[1]	Opera は `padding-top` および `padding-bottom` を `<select>` 要素でサポートしません。
テキストとフォント
`color`	Yes	Yes
`font`	Yes	Yes	`line-height` の注意事項をご覧ください。
`letter-spacing`	Partial^[1]	Partial^[1]	IE9 は `<select>`、`<option>` および `<optgroup>` 要素でこのプロパティをサポートしません。Mac OSX で WebKit ベースのブラウザは、`<option>` 要素や `<optgroup>` 要素でこのプロパティをサポートしません。
`text-align`	No^[1]	No^[1]	Windows 7 で IE9 および Mac OSX で WebKit ベースのブラウザは、このウィジェットで本プロパティをサポートしません。
`text-decoration`	No^[1]	No^[1]	Firefox および IE9 以上のみがサポートします。
`text-indent`	No	No
`text-overflow`	No	No
`text-shadow`	No	No
`text-transform`	Partial^[1]	Partial^[1]	ほとんどのブラウザは、`<select>` 要素のみでこのプロパティをサポートします。
ボーダーと背景
`background`	Yes	Yes
`border-radius`	Yes^[1]	Yes^[1]	Opera では、明示的にボーダーが設定されている場合にのみ `border-radius` が適用されます。
`box-shadow`	No	Partial^[1]	IE9 はこのプロパティをサポートしません。

Datalist

プロパティ	N	T
CSS ボックスモデル
`width`	No	No
`height`	No	No
`border`	No	No
`margin`	No	No
`padding`	No	No
テキストとフォント
`color`	No	No
`font`	No	No
`letter-spacing`	No	No
`text-align`	No	No
`text-decoration`	No	No
`text-indent`	No	No
`text-overflow`	No	No
`text-shadow`	No	No
`text-transform`	No	No
ボーダーと背景
`background`	No	No
`border-radius`	No	No
`box-shadow`	No	No

ファイルピッカー

プロパティ	N	T	備考
CSS ボックスモデル
`width`	No	No
`height`	No	No
`border`	No	No
`margin`	Yes	Yes
`padding`	No	No
テキストとフォント
`color`	Yes	Yes
`font`	No^[1]	No^[1]	サポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
`letter-spacing`	Partial^[1]	Partial^[1]	ほとんどのブラウザは、このプロパティを選択ボタンにも適用します。
`text-align`	No	No
`text-decoration`	No	No
`text-indent`	Partial^[1]	Partial^[1]	ウィジェットの外側に左マージンがあるような状態になります。
`text-overflow`	No	No
`text-shadow`	No	No
`text-transform`	No	No
ボーダーと背景
`background`	No^[1]	No^[1]	サポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
`border-radius`	No	No
`box-shadow`	No	Partial^[1]	IE9 はこのプロパティをサポートしません。

日付選択

多くのプロパティがサポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。

プロパティ	N	T
CSS ボックスモデル
`width`	No	No
`height`	No	No
`border`	No	No
`margin`	Yes	Yes
`padding`	No	No
テキストとフォント
`color`	No	No
`font`	No	No
`letter-spacing`	No	No
`text-align`	No	No
`text-decoration`	No	No
`text-indent`	No	No
`text-overflow`	No	No
`text-shadow`	No	No
`text-transform`	No	No
ボーダーと背景
`background`	No	No
`border-radius`	No	No
`box-shadow`	No	No

カラーピッカー

現状では、動作を当てにできるほど十分な実装はされていません。

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	No^[1]	Yes	Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。
`border`	Yes	Yes
`margin`	Yes	Yes
`padding`	No^[1]	Yes	Opera はこのプロパティを、select ウィジェットと同じ制限事項のもとに処理します。
テキストとフォント
`color`	N.A.	N.A.
`font`	N.A.	N.A.
`letter-spacing`	N.A.	N.A.
`text-align`	N.A.	N.A.
`text-decoration`	N.A.	N.A.
`text-indent`	N.A.	N.A.
`text-overflow`	N.A.	N.A.
`text-shadow`	N.A.	N.A.
`text-transform`	N.A.	N.A.
ボーダーと背景
`background`	No^[1]	No^[1]	サポートされていますが、ブラウザ間で頼りにできるほどの一貫性はありません。
`border-radius`	No^[1]	No^[1]
`box-shadow`	No^[1]	No^[1]

メーターとプログレスバー