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

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

表の見方
----

### 値

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

✅ Yes

プロパティは各ブラウザー間で、一貫してほどよく対応されています。もっとも、特殊なケースでは奇妙な副作用に直面するかもしれません。

⚠️ Partial

プロパティは動作しますが、たびたび奇妙な副作用や一貫性のなさに直面するかもしれません。まず副作用について熟知しているのでなければ、これらのプロパティは避けるべきでしょう。

❌ No

プロパティは動作しない、または頼りにできるほどの一貫性がありません。

n.a.

当該ウィジェットに対して、そのプロパティは意味がありません。

### レンダリング

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

N (Normal)

プロパティをそのまま適用することを表します。

T (Tweaked)

下記の追加ルールとともにプロパティを適用することを表します:


```css
\* {
  /\* これは、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 | 1. WebKit ブラウザーは (主に Mac OSX や iOS
 で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none`
 を使用することが必要です。
2. Windows 7 で Internet Explorer 9 は、
 `background:none` が適用されなければ境界を適用しません。
 |
| `border` | ⚠️ Partial[1][2] | ✅ Yes | 1. WebKit ブラウザーは (主に Mac OSX や iOS
 で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none`
 を使用することが必要です。
2. Windows 7 で Internet Explorer 9 は、`background:none`
 が適用されなければ境界を適用しません。
 |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ⚠️ Partial[1][2] | ✅ Yes | 1. WebKit ブラウザーは (主に Mac OSX や iOS
 で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none`
 を使用することが必要です。
2. Windows 7 で Internet Explorer 9 は、`background:none`
 が適用されなければ境界を適用しません。
 |
| *テキストとフォント* |
| --- |
| `color`[1] | ✅ Yes | ✅ Yes | 1. `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] | 1. IE9 はこのプロパティを
 ``<textarea>`` のみで、Opera
 は単一行のテキストフィールドのみで対応しています。
 |
| `text-overflow` | ⚠️ Partial | ⚠️ Partial |  |
| `text-shadow` | ⚠️ Partial | ⚠️ Partial |  |
| `text-transform` | ✅ Yes | ✅ Yes |  |
| *境界と背景* |
| --- |
| `background` | ⚠️ Partial[1] | ✅ Yes | 1. WebKit ブラウザーは (主に Mac OSX や iOS
 で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none`
 を使用することが必要です。Windows 7 で Internet Explorer 9 は、`background:none`
 が適用されなければ境界を適用しません。
 |
| `border-radius` | ⚠️ Partial[1][2] | ✅ Yes | 1. WebKit ブラウザーは (主に Mac OSX や iOS
 で)、検索フィールドでネイティブのルックアンドフィールを使用します。従って、検索フィールドにこのプロパティを適用できるようにするために、`-webkit-appearance:none`
 を使用することが必要です。Windows 7 で Internet Explorer 9 は、`background:none`
 が適用されなければ境界を適用しません。
2. Opera では、明示的に境界が設定されている場合にのみ
 `border-radius` が適用されます。
 |
| `box-shadow` | ❌ No | ⚠️ Partial[1] | 1. IE9 はこのプロパティに対応していません。
 |

### ボタン

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

| プロパティ | N | T | 備考 |
| --- | --- | --- | --- |
| *CSS ボックスモデル* |
| --- |
| `width` | ✅ Yes | ✅ Yes |  |
| `height` | ⚠️ Partial[1] | ✅ Yes | 1. Mac OSX や iOS では、WebKit
 ベースブラウザーでこのプロパティが適用されません。
 |
| `border` | ⚠️ Partial | ✅ Yes |  |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ⚠️ Partial[1] | ✅ Yes | 1. 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] | 1. Opera では、明示的に境界が設定されている場合にのみ
 `border-radius` が適用されます。
 |
| `box-shadow` | ❌ No | ⚠️ Partial[1] | 1. IE9 はこのプロパティに対応していません。
 |

### 数値

`number` 入力タイプを見てください。フィールドの値の変更に使用するスピンボタンのスタイルを変更するための、標準的な方法はありません。Safari では、スピンボタンがフィールドの外部にあることは知っておくべきです。

| プロパティ | N | T | 備考 |
| --- | --- | --- | --- |
| *CSS ボックスモデル* |
| --- |
| `width` | ✅ Yes | ✅ Yes |  |
| `height` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. Opera
 ではスピンボタンが拡大されて、フィールドの内容物を隠す場合があります。
 |
| `border` | ✅ Yes | ✅ Yes |  |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ⚠️ Partial[1] | ⚠️ Partial[1] | 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] | 1. 一部のブラウザーでは、マージンを追加したりウィジェットを引き伸ばしたりします。
 |
| `height` | ❌ No[1] | ❌ No[1] | 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] | 1. このプロパティは
 ``<select>``
 要素では問題ありませんが、
 ``<option>`` 要素や
 ``<optgroup>``
 要素では効果がありません。
 |
| `height` | ❌ No | ✅ Yes |  |
| `border` | ⚠️ Partial | ✅ Yes |  |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ❌ No[1] | ⚠️ Partial[2] | 1. プロパティは適用されますが、Mac OSX
 ではブラウザー間の一貫性がありません。
2. このプロパティは
 ``<select>``
 要素には適用されますが、
 ``<option>`` 要素や
 ``<optgroup>``
 要素では処理に一貫性がありません。
 |
| *テキストとフォント* |
| --- |
| `color` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. Mac OSX では、WebKit
 ベースのブラウザーがネイティブウィジェットでこのプロパティに対応せず、また
 ``<option>`` 要素や
 ``<optgroup>`` 要素では Opera
 を含めてまったく対応していません。
 |
| `font` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. Mac OSX では、WebKit
 ベースのブラウザーがネイティブウィジェットでこのプロパティに対応せず、また
 ``<option>`` 要素や
 ``<optgroup>`` 要素では Opera
 を含めてまったく対応していません。
 |
| `letter-spacing` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. IE9 は `<select>`、
 ``<option>`` および
 ``<optgroup>``
 要素でこのプロパティに対応していません。Mac OSX で WebKit
 ベースのブラウザーは、
 ``<option>`` 要素や
 ``<optgroup>``
 要素でこのプロパティに対応していません。
 |
| `text-align` | ❌ No[1] | ❌ No[1] | 1. Windows 7 で IE9 および Mac OSX で WebKit
 ベースのブラウザーは、このウィジェットで本プロパティに対応していません。
 |
| `text-decoration` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. Firefox のみがこのプロパティを完全対応しています。 Opera
 はこのプロパティに全く対応しておらず、また他のブラウザーは
 ``<select>``
 要素のみに対応しています。
 |
| `text-indent` | ⚠️ Partial[1][2] | ⚠️ Partial[1][2] | 1. ほとんどのブラウザーは、``<select>``
 要素のみでこのプロパティに対応しています。
2. IE9 はこのプロパティに対応していません。
 |
| `text-overflow` | ❌ No | ❌ No |  |
| `text-shadow` | ⚠️ Partial[1][2] | ⚠️ Partial[1][2] | 1. ほとんどのブラウザーは、``<select>``
 要素のみでこのプロパティに対応しています。
2. IE9 はこのプロパティに対応していません。
 |
| `text-transform` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. ほとんどのブラウザーは、``<select>``要素のみでこのプロパティに対応しています。
 |
| *境界と背景* |
| --- |
| `background` | ⚠️ Partial[1] | ⚠️ Partial[1] | 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] | 1. Opera は `padding-top` および
 `padding-bottom` に
 ``<select>``
 要素で対応していません。
 |
| *テキストとフォント* |
| --- |
| `color` | ✅ Yes | ✅ Yes |  |
| `font` | ✅ Yes | ✅ Yes | `line-height` の注意事項をご覧ください。 |
| `letter-spacing` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. IE9 は ``<select>`` 、
 ``<option>`` および
 ``<optgroup>``
 要素でこのプロパティに対応していません。Mac OSX で WebKit
 ベースのブラウザーは、
 ``<option>`` 要素や
 ``<optgroup>``
 要素でこのプロパティに対応していません。
 |
| `text-align` | ❌ No[1] | ❌ No[1] | 1. Windows 7 で IE9 および Mac OSX で WebKit
 ベースのブラウザーは、このウィジェットで本プロパティに対応していません。
 |
| `text-decoration` | ❌ No[1] | ❌ No[1] | 1. Firefox および IE9 以上のみが対応しています。
 |
| `text-indent` | ❌ No | ❌ No |  |
| `text-overflow` | ❌ No | ❌ No |  |
| `text-shadow` | ❌ No | ❌ No |  |
| `text-transform` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. ほとんどのブラウザーは、
 ``<select>``
 要素のみでこのプロパティに対応します。
 |
| *境界と背景* |
| --- |
| `background` | ✅ Yes | ✅ Yes |  |
| `border-radius` | ✅ Yes[1] | ✅ Yes[1] | 1. Opera では、明示的に境界が設定されている場合にのみ
 `border-radius` が適用されます。
 |
| `box-shadow` | ❌ No | ⚠️ Partial[1] | 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] | 1. 対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。
 |
| `letter-spacing` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. ほとんどのブラウザーは、このプロパティを選択ボタンにも適用します。
 |
| `text-align` | ❌ No | ❌ No |  |
| `text-decoration` | ❌ No | ❌ No |  |
| `text-indent` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. ウィジェットの外側に左マージンがあるような状態になります。
 |
| `text-overflow` | ❌ No | ❌ No |  |
| `text-shadow` | ❌ No | ❌ No |  |
| `text-transform` | ❌ No | ❌ No |  |
| *境界と背景* |
| --- |
| `background` | ❌ No[1] | ❌ No[1] | 1. 対応されていますが、ブラウザー間で頼りにできるほどの一貫性はありません。
 |
| `border-radius` | ❌ No | ❌ No |  |
| `box-shadow` | ❌ No | ⚠️ Partial[1] | 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 | 1. Opera はこのプロパティを、select
 ウィジェットと同じ制限事項のもとに処理します。
 |
| `border` | ✅ Yes | ✅ Yes |  |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ❌ No[1] | ✅ Yes | 1. 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] | 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] | 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] | 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] | 1. Chrome や Opera はウィジェットの周りに余白を追加します。また Windows
 7 の Opera では、スライダーのつまみが引き伸ばされます。
 |
| `border` | ❌ No | ✅ Yes |  |
| `margin` | ✅ Yes | ✅ Yes |  |
| `padding` | ⚠️ Partial[1] | ✅ Yes | 1. `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] | 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] | 1. IE9 はこのプロパティに対応していません。
 |
| `box-shadow` | ⚠️ Partial[1] | ⚠️ Partial[1] | 1. IE9 はこのプロパティに対応していません。
 |

関連情報
----

### 学習経路

* 初めてのフォーム
* ウェブフォームの構築方法
* ネイティブのフォームウィジェット
* HTML5 の入力型
* 高度なフォームコントロール
* UI 擬似クラス
* ウェブフォームへのスタイル設定
* クライアントサイドのフォーム検証
* フォームデータの送信
### 高度なトピック

* JavaScript によるフォームの送信
* カスタムフォームウィジェットの作成方法
* 古いブラウザーでの HTML フォーム
* フォームへの高度なスタイル設定
* フォームコントロール向けの CSS プロパティの互換性一覧表