表单组件兼容性列表

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

如何阅读表格

值

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

YES
此属性具有相当一致的跨浏览器支持。在某些极端情况下，你可能仍然会面临奇怪的副作用。
PARTIAL
尽管这个属性会生效，你还是会经常面对奇怪的副作用和不一致性。你应该尽力避免这些属性，除非你已经深知那些副作用。
NO
此属性就是不工作或者表现得非常不一致，所以并不可靠。
N.A.
此属性对这种类型的组件没有意义。

渲染

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

N (Normal)
表示这个属性会像设置的那样应用。
T (Tweaked)
表示这个属性需要通过下列的额外规则来使用：
* {
/* This turn off the native look and feel on WebKit based browsers */
  -webkit-appearance: none;

/* This turn off the native look and feel on Gecko based browsers */
  -moz-appearance: none;

/* This turn off the native look and feel on several different browsers
   including Opera, Internet Explorer and Firefox */
  background: none;
}

兼容性表格

Global behaviors

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

border, background, border-radius, height
任意属性可能影响组件部分或全部的原生外观。小心使用。
line-height
不同浏览器支持不同，避免使用
text-decoration
Opera表单不支持
text-overflow
Opera, Safari,  IE9 表单不支持
text-shadow
Opera 和 IE9 不支持

Text fields

Property N T Note
CSS box model
width Yes Yes  
height Partial[1][2] Yes
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
border Partial[1][2] Yes
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
margin Yes Yes  
padding Partial[1][2] Yes
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
  2. 在 Windows 7, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
Text and font
color[1] Yes Yes
  1. 如果 border-color 属性没有设置，一些基于 WebKit 的浏览器会将 color 属性应用到边框上，颜色和 <textarea> 的字体颜色一样。
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  
Border and background
background Partial[1] Yes
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
border-radius Partial[1][2] Yes
  1. WebKit 浏览器 (主要在 Mac OSX and iOS 上) 的搜索域使用原生的样式和行为。因此，需要使用 -webkit-appearance:none 才能将这个属性应用到搜索域上。
  2. 在 Windows 7上, Internet Explorer 9 不会应用到边框上，除非 background:none 已应用。
  3. 在 Opera 上，只有当边框明确设定时 border-radius 属性才会应用
box-shadow No Partial[1]
  1. IE9 不支持这个属性

Buttons

Property N T Note
CSS box model
width Yes Yes  
height Partial[1] Yes
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
border Partial Yes  
margin Yes Yes  
padding Partial[1] Yes
  1. 这个属性不能应用于 Mac OSX or iOS 上基于 WebKit 的浏览器。
Text and font
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  
Border and background
background Yes Yes  
border-radius Yes[1] Yes[1]
  1. 在 Opera 上，只有当边框明确设定时 border-radius 属性才会应用
box-shadow No Partial[1]
  1. IE9 不支持这个属性

Number

在实现了 number 组件的浏览器上，并没有一种标准的方式改变数字组件的样式，值得注意的是 Safari 上的数字输入框不在这个范围内。

Property N T Note
CSS box model
width Yes Yes  
height Partial[1] Partial[1]
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
border Yes Yes  
margin Yes Yes  
padding Partial[1] Partial[1]
  1. 在 Opera 上，数字选择器缩小时，可能会隐藏域中内容。
Text and font
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.  
Border and background
background No No

支持，但浏览器之间的不一致性太多，所以并不可靠。
border-radius No No
box-shadow No No

Check boxes and radio buttons

Property N T Note
CSS box model
width No[1] No[1]
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
height No[1] No[1]
  1. 一些浏览器会添加额外的边缘，另一些会拉伸组件。
border No No  
margin Yes Yes  
padding No No  
Text and font
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.  
Border and background
background No No  
border-radius No No  
box-shadow No No  

Select boxes (single line)

Firefox 不提供任何方式改变 <select> 元素的下箭头。

Property N T Note
CSS box model
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> 元素。
Text and font
color Partial[1] Partial[1]
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 <option> 和 <optgroup> 元素上根本不支持这个属性。
font Partial[1] Partial[1]
  1. 在 Mac OSX 上， 基于 WebKit 的浏览器 不支持将这个属性用于原生组件。它们和 Opera, 在 <option> 和 <optgroup> 元素上根本不支持这个属性。
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> 元素。
Border and background
background Partial[1] Partial[1]
  1. 大部分浏览器仅仅支持将这个属性用于 <select> 元素。
border-radius Partial[1] Partial[1]
box-shadow No Partial[1]

Select boxes (multiline)

Property N T Note
CSS box model
width Yes Yes  
height Yes Yes  
border Yes Yes  
margin Yes Yes  
padding Partial[1] Partial[1]
  1. Opera 在 <select> 元素上 不支持 padding-top 和 padding-bottom 。
Text and font
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 and IE9+ 支持。
text-indent No No  
text-overflow No No  
text-shadow No No  
text-transform Partial[1] Partial[1]
  1. 大部分浏览器仅仅支持将这个属性用于 <select> 元素。
Border and background
background Yes Yes  
border-radius Yes[1] Yes[1]
  1. 在 Opera 上，只有当边框明确设定时 border-radius 属性才会应用
box-shadow No Partial[1]
  1. IE9 不支持这个属性

Datalist

Property N T Note
CSS box model
width No No  
height No No  
border No No  
margin No No  
padding No No  
Text and font
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  
Border and background
background No No  
border-radius No No  
box-shadow No No  

File picker

Property N T Note
CSS box model
width No No  
height No No  
border No No  
margin Yes Yes  
padding No No  
Text and font
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  
Border and background
background No[1] No[1]
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
border-radius No No  
box-shadow No Partial[1]
  1. IE9 不支持这个属性

Date pickers

许多属性都支持但是浏览器之间的不一致性太多，所以并不可靠。

Property N T Note
CSS box model
width No No  
height No No  
border No No  
margin Yes Yes  
padding No No  
Text and font
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  
Border and background
background No No  
border-radius No No  
box-shadow No No  

Color pickers

There is currently not enough implementation to get realiable behaviors.

Property N T Note
CSS box model
width Yes Yes  
height No[1] Yes
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
border Yes Yes  
margin Yes Yes  
padding No[1] Yes
  1. Opera 将它像一个选择组件一样，以同样的限制处理。
Text and font
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.  
Border and background
background No[1] No[1]
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
border-radius No[1] No[1]
box-shadow No[1] No[1]

Meters and progress

There is currently not enough implementation to get realiable behaviors.

Property N T Note
CSS box model
width Yes Yes  
height Yes Yes  
border Partial Yes  
margin Yes Yes  
padding Yes Partial[1]
  1. 当 padding 属性应用于一个 tweaked 元素时，Chrome 会隐藏 <progress> 和<meter> 元素。
Text and font
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.  
Border and background
background No[1] No[1]
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
border-radius No[1] No[1]
box-shadow No[1] No[1]

Range

There is no standard way to change the style of the range grip and Opera has no way to tweak the default rendering of the range widget.

Property N T Note
CSS box model
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 属性被运用，但是没有任何的视觉效果。
Text and font
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.  
Border and background
background No[1] No[1]
  1. 支持，但浏览器之间的不一致性太多，所以并不可靠。
border-radius No[1] No[1]
box-shadow No[1] No[1]

Image buttons

Property N T Note
CSS box model
width Yes Yes  
height Yes Yes  
border Yes Yes  
margin Yes Yes  
padding Yes Yes  
Text and font
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.  
Border and background
background Yes Yes  
border-radius Partial[1] Partial[1]
  1. IE9 不支持这个属性
box-shadow Partial[1] Partial[1]
  1. IE9 不支持这个属性

 

在本单元中