Web 表单(与用户数据打交道)之表单控件兼容性列表

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

如何阅读表格

值

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

• ✅ 支持

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

• ⚠️ 部分支持

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

• ❌ 不支持

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

• 不适用

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

渲染

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

• N (Normal)

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

• T (Tweaked)

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

* {
  /* 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

This property is not supported by Opera on form widgets.

• 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	❌ 不支持	❌ 不支持

Check boxes and radio buttons

参见 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 属性 (en-US)。

属性	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

参见 <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 不支持这个属性。