フォームコントロール向けの CSS プロパティの互換性一覧表

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

表の見方

値

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

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

レンダリング

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

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

* {
/* これは、WebKit ベースのブラウザーでネイティブのルックアンドフィールを無効にします */
  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, 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> 要素の下矢印を変更する方法はありません。.

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

<select>、<optgroup>、<option> の各要素とsize 属性を参照してください。

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