This article needs a technical review. How you can help.
The following compatibility tables try to summarize the state of CSS support for HTML forms. Due to the complexity of CSS and HTML forms, these tables can't be considered a perfect reference. However, they will give you good insight into what can and can't be done, which will help you learn how to do things.
How to read the tables
Values
For each property, there are four possible values:
- YES
- There's reasonably consistent support for the property across browsers. You may still face strange side effects in certain edge cases.
- PARTIAL
- While the property works, you may frequently face strange side effects or inconsistencies. You should probably avoid these properties unless you master those side effects first.
- NO
- The property simply doesn't work or is so inconsistent that it's not reliable.
- N.A.
- The property has no meaning for this type of widget.
Rendering
For each property there are two possible renderings:
- N (Normal)
- Indicates that the property is applied as it is
- T (Tweaked)
- Indicates that the property is applied with the extra rule below:
* { /* 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; }
Compatibility tables
Global behaviors
Some behaviors are common to many browsers at a global level:
-
border
,background
,border-radius
,height
- Using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. Be careful when you use them.
-
line-height
- This property is supported inconsistently across browsers and you should avoid it.
-
text-decoration
- This property is not supported by Opera on form widgets.
-
text-overflow
- Opera, Safari, and IE9 do not support this property on form widgets.
-
text-shadow
-
Opera does not support
text-shadow
on form widgets and IE9 does not support it at all.
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 | See the note about line-height |
letter-spacing |
Yes | Yes | |
text-align |
Yes | Yes | |
text-decoration |
Partial | Partial | See the note about 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 | See the note about 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
On browsers that implement the number
widget, there is no standard way to change the style of spinners used to change the value of the field. It is worth noting that the spinners on Safari are outside the field.
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 | See the note about 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 |
Supported but there is too much inconsistency between browsers to be reliable. |
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 does not provide any way to change the down arrow on the <select>
element.
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 | See the note about 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
Many properies are supported but there is to much inconstency between browsers to be reliable.
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] |
|