CSS property compatibility table for form controls
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 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:
css
* {
/* Turn off the native look and feel */
appearance: none;
}
Compatibility tables
Altering the appearance of form controls with CSS, such as with border
, background
, border-radius
, and height
can partially or fully turn off the native look & feel of widgets on some browsers. Be careful when you use them.
Text fields
See the text
, search
, and password
input types.
Property | N | T | Note |
---|---|---|---|
CSS box model | |||
width |
✅ Yes | ✅ Yes | |
height |
⚠️ Partial[1] | ✅ Yes |
|
border |
⚠️ Partial[1] | ✅ Yes |
|
margin |
✅ Yes | ✅ Yes | |
padding |
⚠️ Partial[1] | ✅ 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] | ✅ Yes |
|
box-shadow |
❌ No | ⚠️ Partial[1] |
|
Buttons
See the button
, submit
, and reset
input types and the
element.<button>
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
See the number
input type. There is no standard way to change the style of spinners used to change the value of the field, with the spinners on Safari being 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
See the checkbox
and radio
input types.
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)
See the
, <select>
and <optgroup>
elements.<option>
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-decoration |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-indent |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
text-overflow |
❌ No | ❌ No | |
text-shadow |
⚠️ Partial[1] | ⚠️ Partial[1] |
|
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] |
Note Firefox does not provide any way to change the down arrow on the
element.<select>
Select boxes (multiline)
See the
, <select>
and <optgroup>
elements and the <option>
size
attribute.
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
See the
and <datalist>
elements and the <input>
list
attribute.
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
See the file
input type.
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
See the date
and time
input types. Many properties are supported, but there is too much inconsistency 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
See the color
input type:
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
See the
and <meter>
elements:<progress>
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
See the range
input type. 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
See the image
input type:
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] |
|
See also
Learning path
Advanced Topics
- Sending forms through JavaScript
- How to build custom form widgets
- HTML forms in legacy browsers
- Advanced styling for HTML forms
- Property compatibility table for form widgets