表单控件兼容性列表

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

按钮

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

属性	N	T	注释
CSS 盒子模型
`width`	✅ 支持	✅ 支持
`height`	⚠️ 部分支持^[1]	✅ 支持	这个属性不能应用于 Mac OSX 或 iOS 上基于 WebKit 的浏览器。
`border`	⚠️ 部分支持	✅ 支持
`margin`	✅ 支持	✅ 支持
`padding`	⚠️ 部分支持^[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]	在 Opera 上，只有当边框被明确设定时，`border-radius` 属性才会被应用。
`box-shadow`	❌ 不支持	⚠️ 部分支持^[1]	IE9 不支持这个属性。

数字

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

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

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

选择框（多行）

参见 <select>、<optgroup> 和 <option> 元素，以及 size 属性。

属性	N	T	注释
CSS 盒子模型
`width`	✅ 支持	✅ 支持
`height`	✅ 支持	✅ 支持
`border`	✅ 支持	✅ 支持
`margin`	✅ 支持	✅ 支持
`padding`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	Opera 在 `<select>` 元素上不支持 `padding-top` 和 `padding-bottom`。
文本和字体
`color`	✅ 支持	✅ 支持
`font`	✅ 支持	✅ 支持	参见有关 `line-height` 的注释。
`letter-spacing`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	IE9 在 `<select>`、 `<option>` 和 `<optgroup>` 元素上不支持这个属性；Mac OSX 上基于 WebKit 的浏览器在 `<option>` 和 `<optgroup>` 元素上不支持这个属性。
`text-align`	❌ 不支持^[1]	❌ 不支持^[1]	Windows 7 上的 IE9 和 Mac OSX 上基于 WebKit 的浏览器，不支持这个组件上的这个属性。
`text-decoration`	❌ 不支持^[1]	❌ 不支持^[1]	只被 Firefox and IE9+ 支持。
`text-indent`	❌ 不支持	❌ 不支持
`text-overflow`	❌ 不支持	❌ 不支持
`text-shadow`	❌ 不支持	❌ 不支持
`text-transform`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	大部分浏览器仅支持将这个属性用于 `<select>` 元素。
边框和背景
`background`	✅ 支持	✅ 支持
`border-radius`	✅ 支持^[1]	✅ 支持^[1]	在 Opera 上，只有当边框被明确设定时，`border-radius` 属性才会被应用。
`box-shadow`	❌ 不支持	⚠️ 部分支持^[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]	支持，但浏览器之间的不一致性太多，所以并不可靠。
`letter-spacing`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	许多浏览器将这个属性应用到选择按钮上。
`text-align`	❌ 不支持	❌ 不支持
`text-decoration`	❌ 不支持	❌ 不支持
`text-indent`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	它表现的或多或少的像一个组件额外的左边距。
`text-overflow`	❌ 不支持	❌ 不支持
`text-shadow`	❌ 不支持	❌ 不支持
`text-transform`	❌ 不支持	❌ 不支持
边框和背景
`background`	❌ 不支持^[1]	❌ 不支持^[1]	支持，但浏览器之间的不一致性太多，所以并不可靠。
`border-radius`	❌ 不支持	❌ 不支持
`box-shadow`	❌ 不支持	⚠️ 部分支持^[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]	✅ 支持	Opera 以与选择组件一样的限制来处理它。
`border`	✅ 支持	✅ 支持
`margin`	✅ 支持	✅ 支持
`padding`	❌ 不支持^[1]	✅ 支持	Opera 以与选择组件一样的限制来处理它。
文本和字体
`color`	不适用	不适用
`font`	不适用	不适用
`letter-spacing`	不适用	不适用
`text-align`	不适用	不适用
`text-decoration`	不适用	不适用
`text-indent`	不适用	不适用
`text-overflow`	不适用	不适用
`text-shadow`	不适用	不适用
`text-transform`	不适用	不适用
边框和背景
`background`	❌ 不支持^[1]	❌ 不支持^[1]	支持，但浏览器之间的不一致性太多，所以并不可靠。
`border-radius`	❌ 不支持^[1]	❌ 不支持^[1]
`box-shadow`	❌ 不支持^[1]	❌ 不支持^[1]

标量值和进度

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

属性	N	T	注释
CSS 盒子模型
`width`	✅ 支持	✅ 支持
`height`	✅ 支持	✅ 支持
`border`	⚠️ 部分支持	✅ 支持
`margin`	✅ 支持	✅ 支持
`padding`	✅ 支持	⚠️ 部分支持^[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]	支持，但浏览器之间的不一致性太多，所以并不可靠。
`border-radius`	❌ 不支持^[1]	❌ 不支持^[1]
`box-shadow`	❌ 不支持^[1]	❌ 不支持^[1]

范围

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

属性	N	T	注释
CSS 盒子模型
`width`	✅ 支持	✅ 支持
`height`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	Chrome 和 Opera 在组件周围添加了额外的空白，而 Windows 7 上的 Opera 则拉伸范围选择器的滑块。
`border`	❌ 不支持	✅ 支持
`margin`	✅ 支持	✅ 支持
`padding`	⚠️ 部分支持^[1]	✅ 支持	`padding` 属性被应用时，不会有任何视觉效果。
文本和字体
`color`	不适用	不适用
`font`	不适用	不适用
`letter-spacing`	不适用	不适用
`text-align`	不适用	不适用
`text-decoration`	不适用	不适用
`text-indent`	不适用	不适用
`text-overflow`	不适用	不适用
`text-shadow`	不适用	不适用
`text-transform`	不适用	不适用
边框和背景
`background`	❌ 不支持^[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]	IE9 不支持这个属性。
`box-shadow`	⚠️ 部分支持^[1]	⚠️ 部分支持^[1]	IE9 不支持这个属性。