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

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

表の見方

値

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

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

レンダリング

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

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

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

/* Internet Explorer用 */
  background: none;
}

実装状況一覧表

全体的な動作

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

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

テキストフィールド

text, search, and password の入力タイプを見てください。

プロパティ	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 はこのプロパティに対応していません。

ボタン

button, submit, and reset input types and the <button> 要素を見てください。

プロパティ	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

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

checkbox と radio 入力タイプを見てください。

プロパティ	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

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

<select>、 <optgroup>、<option> 要素を見てください。

プロパティ	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]

Firefox では<select> 要素の下矢印を変更する方法はありません。.

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

プロパティ	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

<datalist> and <input> 要素と list 属性を見てください。

プロパティ	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

ファイルピッカー

file 入力タイプを見てください。

プロパティ	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 はこのプロパティに対応していません。

日付選択

date と time 入力タイプを見てください。多くのプロパティが対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。

プロパティ	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

カラーピッカー

color 入力タイプを見てください。

プロパティ	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]

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

<meter> と <progress> 要素を見てください:

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Yes	Yes
`border`	Partial	Yes
`margin`	Yes	Yes
`padding`	Yes	Partial^[1]	Chrome は調整された (Tweaked) 状態の要素に `padding` プロパティが適用されていると、`<progress>` 要素や `<meter>` 要素を隠します。
テキストとフォント
`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]

Range

range 入力タイプを見てください。スライダーのつまみのスタイルを変更するための標準的な方法はなく、また Opera ではウィジェットのデフォルトの表示を調整する方法がありません。

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Partial^[1]	Partial^[1]	Chrome や Opera はウィジェットの周りに余白を追加します。また Windows 7 の Opera では、スライダーのつまみが引き伸ばされます。
`border`	No	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Yes	`padding` は適用されますが、視覚的な効果はありません。
テキストとフォント
`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]

画像ボタン

image 入力タイプを見てください:

プロパティ	N	T	備考
CSS ボックスモデル
`width`	Yes	Yes
`height`	Yes	Yes
`border`	Yes	Yes
`margin`	Yes	Yes
`padding`	Yes	Yes
テキストとフォント
`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`	Yes	Yes
`border-radius`	Partial^[1]	Partial^[1]	IE9 はこのプロパティに対応していません。
`box-shadow`	Partial^[1]	Partial^[1]	IE9 はこのプロパティに対応していません。