表单控件兼容性列表
=========

下面的兼容性表格尝试总结 HTML 表单的 CSS 支持状况。由于 CSS 和 HTML 表单的复杂性，不能把这些表格当作完善的参考。但是，它们可以让你很好地洞察什么能做什么不能做，这将会对你学习使用有很好地帮助。

如何阅读表格
------

### 值

对于每个属性，有四种可能地取值：

✅ 支持

此属性具有相当一致的跨浏览器支持。在某些极端情况下，你可能仍然会面临奇怪的副作用。

⚠️ 部分支持

尽管这个属性会生效，你还是会经常面对奇怪的副作用和不一致性。你应该尽力避免这些属性，除非你已经深知那些副作用。

❌ 不支持

此属性就是不工作或者表现得非常不一致，所以并不可靠。

不适用

此属性对这种类型的组件没有意义。

### 渲染

对于每个属性有两种可能的渲染方式：

N (Normal)

表示这个属性会像设置的那样应用。

T (Tweaked)

表示这个属性需要通过下列的额外规则来使用：


```css
\* {
  /\* Turn off the native look and feel \*/
  -webkit-appearance: none;
  appearance: none;

  /\* for 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` input 类型。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ⚠️ 部分支持[1][2] | ✅ 支持 | 1. WebKit 浏览器（主要在 Mac OSX 和 iOS 上）的搜索字段使用原生的样式和行为。因此，需要使用
 `-webkit-appearance:none` 才能将这个属性应用到搜索字段上。
2. Windows 7 的 Internet Explorer 9 不会应用到边框上，除非应用了
 `background:none`。
 |
| `border` | ⚠️ 部分支持[1][2] | ✅ 支持 | 1. WebKit 浏览器（主要在 Mac OSX 和 iOS 上）的搜索字段使用原生的样式和行为。因此，需要使用
 `-webkit-appearance:none` 才能将这个属性应用到搜索字段上。
2. Windows 7 的 Internet Explorer 9 不会应用到边框上，除非应用了
 `background:none`。
 |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ⚠️ 部分支持[1][2] | ✅ 支持 | 1. WebKit 浏览器（主要在 Mac OSX 和 iOS 上）的搜索字段使用原生的样式和行为。因此，需要使用
 `-webkit-appearance:none` 才能将这个属性应用到搜索字段上。
2. Windows 7 的 Internet Explorer 9 不会应用到边框上，除非应用了
 `background:none`。
 |
| *文本和字体* |
| --- |
| `color`[1] | ✅ 支持 | ✅ 支持 | 1. 如果没有设置 `border-color` 属性，一些基于 WebKit 的浏览器会将
 `color` 属性应用到边框上，颜色和
 ``<textarea>`` 的字体颜色一样。
 |
| `font` | ✅ 支持 | ✅ 支持 | 查看有关 `line-height` 的注释 |
| `letter-spacing` | ✅ 支持 | ✅ 支持 |  |
| `text-align` | ✅ 支持 | ✅ 支持 |  |
| `text-decoration` | ⚠️ 部分支持 | ⚠️ 部分支持 | 查看有关 Opera 的注释 |
| `text-indent` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. IE9 只在 ``<textarea>``
 上支持这个属性，而 Opera 只在单行文本字段中支持。
 |
| `text-overflow` | ⚠️ 部分支持 | ⚠️ 部分支持 |  |
| `text-shadow` | ⚠️ 部分支持 | ⚠️ 部分支持 |  |
| `text-transform` | ✅ 支持 | ✅ 支持 |  |
| *边框和背景* |
| --- |
| `background` | ⚠️ 部分支持[1] | ✅ 支持 | 1. WebKit 浏览器（主要在 Mac OSX 和 iOS 上）的搜索字段使用原生的样式和行为。因此，需要使用
 `-webkit-appearance:none` 才能将这个属性应用到搜索字段上。
2. Windows 7 的 Internet Explorer 9 不会应用到边框上，除非应用了
 `background:none`。
 |
| `border-radius` | ⚠️ 部分支持[1][2] | ✅ 支持 | 1. WebKit 浏览器（主要在 Mac OSX 和 iOS 上）的搜索字段使用原生的样式和行为。因此，需要使用
 `-webkit-appearance:none` 才能将这个属性应用到搜索字段上。
2. Windows 7 的 Internet Explorer 9 不会应用到边框上，除非应用了
 `background:none`。
3. 在 Opera 上，只有当边框被明确设定时，`border-radius` 属性才会被应用。
 |
| `box-shadow` | ❌ 不支持 | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |

### 按钮

参见 `button`、`submit` 和 `reset` input 类型，以及 ``<button>`` 元素。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ⚠️ 部分支持[1] | ✅ 支持 | 1. 这个属性不能应用于 Mac OSX 或 iOS 上基于 WebKit 的浏览器。
 |
| `border` | ⚠️ 部分支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ⚠️ 部分支持[1] | ✅ 支持 | 1. 这个属性不能应用于 Mac OSX 或 iOS 上基于 WebKit 的浏览器。
 |
| *文本和字体* |
| --- |
| `color` | ✅ 支持 | ✅ 支持 |  |
| `font` | ✅ 支持 | ✅ 支持 | 查看 `line-height` 的注释。 |
| `letter-spacing` | ✅ 支持 | ✅ 支持 |  |
| `text-align` | ❌ 不支持 | ❌ 不支持 |  |
| `text-decoration` | ⚠️ 部分支持 | ✅ 支持 |  |
| `text-indent` | ✅ 支持 | ✅ 支持 |  |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ⚠️ 部分支持 | ⚠️ 部分支持 |  |
| `text-transform` | ✅ 支持 | ✅ 支持 |  |
| *边框和背景* |
| --- |
| `background` | ✅ 支持 | ✅ 支持 |  |
| `border-radius` | ✅ 支持[1] | ✅ 支持[1] | 1. 在 Opera 上，只有当边框被明确设定时，`border-radius` 属性才会被应用。
 |
| `box-shadow` | ❌ 不支持 | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |

### 数字

参见 `number` input 类型。没有一种标准的方式改变数字字段的样式，值得注意的是 Safari 上的数字字段不在这个范围内。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 在 Opera 上，数字选择器缩小时，可能会隐藏字段中的内容。
 |
| `border` | ✅ 支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 在 Opera 上，数字选择器缩小时，可能会隐藏字段中的内容。
 |
| *文本和字体* |
| --- |
| `color` | ✅ 支持 | ✅ 支持 |  |
| `font` | ✅ 支持 | ✅ 支持 | 查看有关 `line-height` 的注释。 |
| `letter-spacing` | ✅ 支持 | ✅ 支持 |  |
| `text-align` | ✅ 支持 | ✅ 支持 |  |
| `text-decoration` | ⚠️ 部分支持 | ⚠️ 部分支持 |  |
| `text-indent` | ✅ 支持 | ✅ 支持 |  |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ⚠️ 部分支持 | ⚠️ 部分支持 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持 | ❌ 不支持 | 支持，但浏览器之间的不一致性太多，所以并不可靠。 |
| `border-radius` | ❌ 不支持 | ❌ 不支持 |
| `box-shadow` | ❌ 不支持 | ❌ 不支持 |

### 复选框和单选按钮

参见 `checkbox` 和 `radio` input 类型。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
 |
| `height` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
 |
| `border` | ❌ 不支持 | ❌ 不支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ❌ 不支持 | ❌ 不支持 |  |
| *文本和字体* |
| --- |
| `color` | 不适用 | 不适用 |  |
| `font` | 不适用 | 不适用 |  |
| `letter-spacing` | 不适用 | 不适用 |  |
| `text-align` | 不适用 | 不适用 |  |
| `text-decoration` | 不适用 | 不适用 |  |
| `text-indent` | 不适用 | 不适用 |  |
| `text-overflow` | 不适用 | 不适用 |  |
| `text-shadow` | 不适用 | 不适用 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持 | ❌ 不支持 |  |
| `border-radius` | ❌ 不支持 | ❌ 不支持 |  |
| `box-shadow` | ❌ 不支持 | ❌ 不支持 |  |

### 选择框（单行）

参见 ``<select>``、``<optgroup>`` 和 ``<option>`` 元素。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 这个属性在 ``<select>``
 元素上一切正常，但不能用于 ``<option>``
 或 ``<optgroup>`` 元素。
 |
| `height` | ❌ 不支持 | ✅ 支持 |  |
| `border` | ⚠️ 部分支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ❌ 不支持[1] | ⚠️ 部分支持[2] | 1. 这个属性可以应用，但在 Mac OSX 上，但 Mac OSX 上浏览器之间的以不一致的方向显示。
2. 这个属性在 ``<select>``
 元素上一切正常，但不能用于
 ``<option>`` 和
 ``<optgroup>`` 元素。
 |
| *文本和字体* |
| --- |
| `color` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 在 Mac OSX 上，基于 WebKit 的浏览器不支持将这个属性用于原生组件，它们和 Opera
 在 ``<option>`` 和 ``<optgroup>``
 元素上完全不支持这个属性。
 |
| `font` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 在 Mac OSX 上，基于 WebKit 的浏览器不支持将这个属性用于原生组件，它们和 Opera
 在 ``<option>`` 和 ``<optgroup>``
 元素上完全不支持这个属性。
 |
| `letter-spacing` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. IE9 不支持将这个属性用于
 ``<select>``、``<option>``
 和 ``<optgroup>`` 元素；Mac OSX
 上基于 WebKit 的浏览器不支持将这个属性应用于
 ``<option>`` 和
 ``<optgroup>`` 元素。
 |
| `text-align` | ❌ 不支持[1] | ❌ 不支持[1] | 1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器不支持这个组件上的属性。
 |
| `text-decoration` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 只有 Firefox 提供了对这个属性的完全支持。Opera
 完全不支持这个属性，而其他浏览器只提供了对
 ``<select>`` 元素的支持。
 |
| `text-indent` | ⚠️ 部分支持[1][2] | ⚠️ 部分支持[1][2] | 1. 大部分浏览器仅支持将这个属性用于
 ``<select>`` 元素。
2. IE9 不支持这个属性。
 |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ⚠️ 部分支持[1][2] | ⚠️ 部分支持[1][2] | 1. 大部分浏览器仅支持将这个属性用于
 ``<select>`` 元素。
2. IE9 不支持这个属性。
 |
| `text-transform` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 大部分浏览器仅支持将这个属性用于
 ``<select>`` 元素。
 |
| *边框和背景* |
| --- |
| `background` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 大部分浏览器仅支持将这个属性用于
 ``<select>`` 元素。
 |
| `border-radius` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] |
| `box-shadow` | ❌ 不支持 | ⚠️ 部分支持[1] |

注意，Firefox 没有提供用于修改 ``<select>`` 元素的向下箭头的方法。

### 选择框（多行）

参见 ``<select>``、``<optgroup>`` 和 ``<option>`` 元素，以及 `size` 属性 (en-US)。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ✅ 支持 | ✅ 支持 |  |
| `border` | ✅ 支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. Opera 在 ``<select>``
 元素上不支持 `padding-top` 和
 `padding-bottom`。
 |
| *文本和字体* |
| --- |
| `color` | ✅ 支持 | ✅ 支持 |  |
| `font` | ✅ 支持 | ✅ 支持 | 参见有关 `line-height` 的注释。 |
| `letter-spacing` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. IE9 在 ``<select>``、
 ``<option>`` 和
 ``<optgroup>`` 元素上不支持这个属性；Mac OSX
 上基于 WebKit 的浏览器在 ``<option>``
 和 ``<optgroup>`` 元素上不支持这个属性。
 |
| `text-align` | ❌ 不支持[1] | ❌ 不支持[1] | 1. Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
 |
| `text-decoration` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 只被 Firefox and IE9+ 支持。
 |
| `text-indent` | ❌ 不支持 | ❌ 不支持 |  |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-transform` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 大部分浏览器仅支持将这个属性用于
 ``<select>`` 元素。
 |
| *边框和背景* |
| --- |
| `background` | ✅ 支持 | ✅ 支持 |  |
| `border-radius` | ✅ 支持[1] | ✅ 支持[1] | 1. 在 Opera 上，只有当边框被明确设定时，`border-radius` 属性才会被应用。
 |
| `box-shadow` | ❌ 不支持 | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |

### 数据列表

参见 ``<datalist>`` 和 ``<input>`` 元素，以及 `list` 属性。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ❌ 不支持 | ❌ 不支持 |  |
| `height` | ❌ 不支持 | ❌ 不支持 |  |
| `border` | ❌ 不支持 | ❌ 不支持 |  |
| `margin` | ❌ 不支持 | ❌ 不支持 |  |
| `padding` | ❌ 不支持 | ❌ 不支持 |  |
| *文本和字体* |
| --- |
| `color` | ❌ 不支持 | ❌ 不支持 |  |
| `font` | ❌ 不支持 | ❌ 不支持 |  |
| `letter-spacing` | ❌ 不支持 | ❌ 不支持 |  |
| `text-align` | ❌ 不支持 | ❌ 不支持 |  |
| `text-decoration` | ❌ 不支持 | ❌ 不支持 |  |
| `text-indent` | ❌ 不支持 | ❌ 不支持 |  |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-transform` | ❌ 不支持 | ❌ 不支持 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持 | ❌ 不支持 |  |
| `border-radius` | ❌ 不支持 | ❌ 不支持 |  |
| `box-shadow` | ❌ 不支持 | ❌ 不支持 |  |

### 文件选择器

参见 `file` input 类型。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ❌ 不支持 | ❌ 不支持 |  |
| `height` | ❌ 不支持 | ❌ 不支持 |  |
| `border` | ❌ 不支持 | ❌ 不支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ❌ 不支持 | ❌ 不支持 |  |
| *文本和字体* |
| --- |
| `color` | ✅ 支持 | ✅ 支持 |  |
| `font` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
 |
| `letter-spacing` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 许多浏览器将这个属性应用到选择按钮上。
 |
| `text-align` | ❌ 不支持 | ❌ 不支持 |  |
| `text-decoration` | ❌ 不支持 | ❌ 不支持 |  |
| `text-indent` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. 它表现的或多或少的像一个组件额外的左边距。
 |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-transform` | ❌ 不支持 | ❌ 不支持 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
 |
| `border-radius` | ❌ 不支持 | ❌ 不支持 |  |
| `box-shadow` | ❌ 不支持 | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |

### 日期选择器

参见 `date` 和 `time` input 类型。很多属性都被浏览器支持，但浏览器之间的不一致性太多，所以并不可靠。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ❌ 不支持 | ❌ 不支持 |  |
| `height` | ❌ 不支持 | ❌ 不支持 |  |
| `border` | ❌ 不支持 | ❌ 不支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ❌ 不支持 | ❌ 不支持 |  |
| *文本和字体* |
| --- |
| `color` | ❌ 不支持 | ❌ 不支持 |  |
| `font` | ❌ 不支持 | ❌ 不支持 |  |
| `letter-spacing` | ❌ 不支持 | ❌ 不支持 |  |
| `text-align` | ❌ 不支持 | ❌ 不支持 |  |
| `text-decoration` | ❌ 不支持 | ❌ 不支持 |  |
| `text-indent` | ❌ 不支持 | ❌ 不支持 |  |
| `text-overflow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-shadow` | ❌ 不支持 | ❌ 不支持 |  |
| `text-transform` | ❌ 不支持 | ❌ 不支持 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持 | ❌ 不支持 |  |
| `border-radius` | ❌ 不支持 | ❌ 不支持 |  |
| `box-shadow` | ❌ 不支持 | ❌ 不支持 |  |

### 颜色选择器

参见 `color` input 类型：

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ❌ 不支持[1] | ✅ 支持 | 1. Opera 以与选择组件一样的限制来处理它。
 |
| `border` | ✅ 支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ❌ 不支持[1] | ✅ 支持 | 1. Opera 以与选择组件一样的限制来处理它。
 |
| *文本和字体* |
| --- |
| `color` | 不适用 | 不适用 |  |
| `font` | 不适用 | 不适用 |  |
| `letter-spacing` | 不适用 | 不适用 |  |
| `text-align` | 不适用 | 不适用 |  |
| `text-decoration` | 不适用 | 不适用 |  |
| `text-indent` | 不适用 | 不适用 |  |
| `text-overflow` | 不适用 | 不适用 |  |
| `text-shadow` | 不适用 | 不适用 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
 |
| `border-radius` | ❌ 不支持[1] | ❌ 不支持[1] |
| `box-shadow` | ❌ 不支持[1] | ❌ 不支持[1] |

### 标量值和进度

参见 ``<meter>`` 和 ``<progress>`` 元素：

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ✅ 支持 | ✅ 支持 |  |
| `border` | ⚠️ 部分支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ✅ 支持 | ⚠️ 部分支持[1] | 1. 当 `padding` 属性被引用于一个 tweaked
 元素时，Chrome 会隐藏 ``<progress>``
 和 ``<meter>`` 元素。
 |
| *文本和字体* |
| --- |
| `color` | 不适用 | 不适用 |  |
| `font` | 不适用 | 不适用 |  |
| `letter-spacing` | 不适用 | 不适用 |  |
| `text-align` | 不适用 | 不适用 |  |
| `text-decoration` | 不适用 | 不适用 |  |
| `text-indent` | 不适用 | 不适用 |  |
| `text-overflow` | 不适用 | 不适用 |  |
| `text-shadow` | 不适用 | 不适用 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
 |
| `border-radius` | ❌ 不支持[1] | ❌ 不支持[1] |
| `box-shadow` | ❌ 不支持[1] | ❌ 不支持[1] |

### 范围

参见 `range` input 类型。没有一种标准的方式来改变范围小组件的样式，Opera 也没有调整范围小组件默认渲染的方法。

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. Chrome 和 Opera 在组件周围添加了额外的空白，而
 Windows 7 上的 Opera 则拉伸范围选择器的滑块。
 |
| `border` | ❌ 不支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ⚠️ 部分支持[1] | ✅ 支持 | 1. `padding` 属性被应用时，不会有任何视觉效果。
 |
| *文本和字体* |
| --- |
| `color` | 不适用 | 不适用 |  |
| `font` | 不适用 | 不适用 |  |
| `letter-spacing` | 不适用 | 不适用 |  |
| `text-align` | 不适用 | 不适用 |  |
| `text-decoration` | 不适用 | 不适用 |  |
| `text-indent` | 不适用 | 不适用 |  |
| `text-overflow` | 不适用 | 不适用 |  |
| `text-shadow` | 不适用 | 不适用 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ❌ 不支持[1] | ❌ 不支持[1] | 1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
 |
| `border-radius` | ❌ 不支持[1] | ❌ 不支持[1] |
| `box-shadow` | ❌ 不支持[1] | ❌ 不支持[1] |

### 图像按钮

参见 `image` input 类型：

| 属性 | N | T | 注释 |
| --- | --- | --- | --- |
| *CSS 盒子模型* |
| --- |
| `width` | ✅ 支持 | ✅ 支持 |  |
| `height` | ✅ 支持 | ✅ 支持 |  |
| `border` | ✅ 支持 | ✅ 支持 |  |
| `margin` | ✅ 支持 | ✅ 支持 |  |
| `padding` | ✅ 支持 | ✅ 支持 |  |
| *文本和字体* |
| --- |
| `color` | 不适用 | 不适用 |  |
| `font` | 不适用 | 不适用 |  |
| `letter-spacing` | 不适用 | 不适用 |  |
| `text-align` | 不适用 | 不适用 |  |
| `text-decoration` | 不适用 | 不适用 |  |
| `text-indent` | 不适用 | 不适用 |  |
| `text-overflow` | 不适用 | 不适用 |  |
| `text-shadow` | 不适用 | 不适用 |  |
| `text-transform` | 不适用 | 不适用 |  |
| *边框和背景* |
| --- |
| `background` | ✅ 支持 | ✅ 支持 |  |
| `border-radius` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |
| `box-shadow` | ⚠️ 部分支持[1] | ⚠️ 部分支持[1] | 1. IE9 不支持这个属性。
 |

参见
--

### 学习路径

* 创建我的第一个表单
* 如何构造 HTML 表单
* 原生表单控件
* HTML5 input 类型
* 其他表单控件
* UI 伪类
* 样式化 HTML 表单
* 表单数据校验
* 发送表单数据
### 进阶内容

* 使用 JavaScript 发送表单
* 如何构建自定义表单控件
* 旧式浏览器中的 HTML 表单
* 高级 HTML 表单样式
* 表单组件兼容性列表