表单控件兼容性列表

下面的兼容性表格尝试总结 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;
}

兼容性表格

全局行为

对许多浏览器来说,许多行为在全局范围内都是通用的:

borderbackgroundborder-radiusheight

在某些浏览器中,这里的任意一个属性可能影响组件的部分或全部的原生外观。小心使用。

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 则是整个表单都不支持这个属性。

文本字段

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

按钮

参见 buttonsubmitreset 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 ❌ 不支持 ❌ 不支持

Check boxes and radio buttons

参见 checkboxradio 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-toppadding-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

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

日期选择器

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

参见

学习路径

进阶内容