下面的兼容性表格尝试总结 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 |
|
border |
Partial[1][2] | Yes |
|
margin |
Yes | Yes | |
padding |
Partial[1][2] | Yes |
|
Text and font | |||
color [1] |
Yes | Yes |
|
font |
Yes | Yes | 查看有关 line-height 的注释 |
letter-spacing |
Yes | Yes | |
text-align |
Yes | Yes | |
text-decoration |
Partial | Partial | 查看有关 Opera 的注释 |
text-indent |
Partial[1] | Partial[1] |
|
text-overflow |
Partial | Partial | |
text-shadow |
Partial | Partial | |
text-transform |
Yes | Yes | |
Border and background | |||
background |
Partial[1] | Yes |
|
border-radius |
Partial[1][2] | Yes |
|
box-shadow |
No | Partial[1] |
|
Buttons
Property | N | T | Note |
---|---|---|---|
CSS box model | |||
width |
Yes | Yes | |
height |
Partial[1] | Yes |
|
border |
Partial | Yes | |
margin |
Yes | Yes | |
padding |
Partial[1] | Yes |
|
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] |
|
box-shadow |
No | Partial[1] |
|
Number
在实现了 number
组件的浏览器上,并没有一种标准的方式改变数字组件的样式,值得注意的是 Safari 上的数字输入框不在这个范围内。
Property | N | T | Note |
---|---|---|---|
CSS box model | |||
width |
Yes | Yes | |
height |
Partial[1] | Partial[1] |
|
border |
Yes | Yes | |
margin |
Yes | Yes | |
padding |
Partial[1] | Partial[1] |
|
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] |
|
height |
No[1] | No[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] |
|
height |
No | Yes | |
border |
Partial | Yes | |
margin |
Yes | Yes | |
padding |
No[1] | Partial[2] |
|
Text and font | |||
color |
Partial[1] | Partial[1] |
|
font |
Partial[1] | Partial[1] |
|
letter-spacing |
Partial[1] | Partial[1] |
|
text-align |
No[1] | No[1] |
|
text-decoration |
Partial[1] | Partial[1] |
|
text-indent |
Partial[1][2] | Partial[1][2] |
|
text-overflow |
No | No | |
text-shadow |
Partial[1][2] | Partial[1][2] |
|
text-transform |
Partial[1] | Partial[1] |
|
Border and background | |||
background |
Partial[1] | Partial[1] |
|
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] |
|
Text and font | |||
color |
Yes | Yes | |
font |
Yes | Yes | 查看line-height 的注意事项。 |
letter-spacing |
Partial[1] | Partial[1] |
|
text-align |
No[1] | No[1] |
|
text-decoration |
No[1] | No[1] |
|
text-indent |
No | No | |
text-overflow |
No | No | |
text-shadow |
No | No | |
text-transform |
Partial[1] | Partial[1] |
|
Border and background | |||
background |
Yes | Yes | |
border-radius |
Yes[1] | Yes[1] |
|
box-shadow |
No | Partial[1] |
|
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] |
|
letter-spacing |
Partial[1] | Partial[1] |
|
text-align |
No | No | |
text-decoration |
No | No | |
text-indent |
Partial[1] | Partial[1] |
|
text-overflow |
No | No | |
text-shadow |
No | No | |
text-transform |
No | No | |
Border and background | |||
background |
No[1] | No[1] |
|
border-radius |
No | No | |
box-shadow |
No | Partial[1] |
|
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 |
|
border |
Yes | Yes | |
margin |
Yes | Yes | |
padding |
No[1] | 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 |
No[1] | No[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] |
|
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] |
|
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] |
|
border |
No | Yes | |
margin |
Yes | Yes | |
padding |
Partial[1] | 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 |
No[1] | No[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] |
|
box-shadow |
Partial[1] | Partial[1] |
|
在本单元中
- Your first HTML form
- How to structure an HTML form
- The native form widgets
- Sending form data
- Form data validation
- How to build custom form widgets
- Sending forms through JavaScript
- HTML forms in legacy browsers
- Styling HTML forms
- Advanced styling for HTML forms
- Property compatibility table for form widgets