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
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use appearance:none to be able to apply this property to search fields.
border ⚠️ Partial[1] ✅ Yes
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use appearance:none to be able to apply this property to search fields.
margin ✅ Yes ✅ Yes
padding ⚠️ Partial[1] ✅ Yes
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use appearance:none to be able to apply this property to search fields.
Text and font
color[1] ✅ Yes ✅ Yes
  1. If the border-color property is not set, some WebKit based browsers will apply the color property to the border as well as the font on <textarea>s.
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]
  1. IE9 supports this property only on <textarea>s, whereas Opera only supports it on single line text fields.
text-overflow ⚠️ Partial ⚠️ Partial
text-shadow ⚠️ Partial ⚠️ Partial
text-transform ✅ Yes ✅ Yes
Border and background
background ⚠️ Partial[1] ✅ Yes
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
border-radius ⚠️ Partial[1] ✅ Yes
  1. WebKit browsers (mostly on Mac OSX and iOS) use the native look & feel for the search fields. Therefore, it's required to use -webkit-appearance:none to be able to apply this property to search fields.
box-shadow ❌ No ⚠️ Partial[1]
  1. IE9 does not support this property.

Buttons

See the button, submit, and reset input types and the <button> element.

Property N T Note
CSS box model
width ✅ Yes ✅ Yes
height ⚠️ Partial[1] ✅ Yes
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
border ⚠️ Partial ✅ Yes
margin ✅ Yes ✅ Yes
padding ⚠️ Partial[1] ✅ Yes
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
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]
  1. On Opera the border-radius property is applied only if an explicit border is set.
box-shadow ❌ No ⚠️ Partial[1]
  1. IE9 does not support this property.

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]
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
border ✅ Yes ✅ Yes
margin ✅ Yes ✅ Yes
padding ⚠️ Partial[1] ⚠️ Partial[1]
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
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]
  1. Some browsers add extra margins and others stretch the widget.
height ❌ No[1] ❌ No[1]
  1. Some browsers add extra margins and others stretch the widget.
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>, <optgroup> and <option> elements.

Property N T Note
CSS box model
width ⚠️ Partial[1] ⚠️ Partial[1]
  1. This property is okay on the <select> element, but it cannot be the case on the <option> or <optgroup> elements.
height ❌ No ✅ Yes
border ⚠️ Partial ✅ Yes
margin ✅ Yes ✅ Yes
padding ❌ No[1] ⚠️ Partial[2]
  1. The property is applied, but in an inconsistent way between browsers on Mac OSX.
  2. The property is well applied on the <select> element, but is inconsistently handled on <option> and <optgroup> elements.
Text and font
color ⚠️ Partial[1] ⚠️ Partial[1]
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <option> and <optgroup> elements.
font ⚠️ Partial[1] ⚠️ Partial[1]
  1. On Mac OSX, WebKit based browsers do not support this property on native widgets and they, along with Opera, do not support it at all on <option> and <optgroup> elements.
letter-spacing ⚠️ Partial[1] ⚠️ Partial[1]
  1. IE9 does not support this property on <select>, <option>, and <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> elements.
text-decoration ⚠️ Partial[1] ⚠️ Partial[1]
  1. Only Firefox provides full support for this property. Other browsers only support it on the <select> element.
text-indent ⚠️ Partial[1] ⚠️ Partial[1]
  1. Most of the browsers only support this property on the <select> element.
text-overflow ❌ No ❌ No
text-shadow ⚠️ Partial[1] ⚠️ Partial[1]
  1. Most of the browsers only support this property on the <select> element.
text-transform ⚠️ Partial[1] ⚠️ Partial[1]
  1. Most of the browsers only support this property on the <select> element.
Border and background
background ⚠️ Partial[1] ⚠️ Partial[1]
  1. Most of the browsers only support this property on the <select> element.
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 <select> element.

Select boxes (multiline)

See the <select>, <optgroup> and <option> elements and the 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]
  1. Opera does not support padding-top and padding-bottom on the <select> element.
Text and font
color ✅ Yes ✅ Yes
font ✅ Yes ✅ Yes See the note about line-height.
letter-spacing ⚠️ Partial[1] ⚠️ Partial[1]
  1. IE9 does not support this property on <select>, <option>, and <optgroup> elements; WebKit based browsers on Mac OSX do not support this property on <option> and <optgroup> elements.
text-align ❌ No[1] ❌ No[1]
  1. WebKit based browser on Mac OSX do not support this property on this widget.
text-decoration ❌ No[1] ❌ No[1]
  1. Only supported by Firefox and IE9+.
text-indent ❌ No ❌ No
text-overflow ❌ No ❌ No
text-shadow ❌ No ❌ No
text-transform ⚠️ Partial[1] ⚠️ Partial[1]
  1. Most of the browsers only support this property on the <select> element.
Border and background
background ✅ Yes ✅ Yes
border-radius ✅ Yes[1] ✅ Yes[1]
  1. On Opera the border-radius property is applied only if an explicit border is set.
box-shadow ❌ No ⚠️ Partial[1]
  1. IE9 does not support this property.

Datalist

See the <datalist> and <input> elements and the 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]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
letter-spacing ⚠️ Partial[1] ⚠️ Partial[1]
  1. Many browsers apply this property to the select button.
text-align ❌ No ❌ No
text-decoration ❌ No ❌ No
text-indent ⚠️ Partial[1] ⚠️ Partial[1]
  1. It acts more or less like an extra left margin outside the widget.
text-overflow ❌ No ❌ No
text-shadow ❌ No ❌ No
text-transform ❌ No ❌ No
Border and background
background ❌ No[1] ❌ No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
border-radius ❌ No ❌ No
box-shadow ❌ No ⚠️ Partial[1]
  1. IE9 does not support this property.

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
  1. Opera handles this like a select widget with the same restriction.
border ✅ Yes ✅ Yes
margin ✅ Yes ✅ Yes
padding ❌ No[1] ✅ Yes
  1. Opera handles this like a select widget with the same restriction.
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. Supported, but there is too much inconsistency between browsers to be reliable.
border-radius ❌ No[1] ❌ No[1]
box-shadow ❌ No[1] ❌ No[1]

Meters and progress

See the <meter> and <progress> elements:

Property N T Note
CSS box model
width ✅ Yes ✅ Yes
height ✅ Yes ✅ Yes
border ⚠️ Partial ✅ Yes
margin ✅ Yes ✅ Yes
padding ✅ Yes ⚠️ Partial[1]
  1. Chrome hides the <progress> and <meter> element when the padding property is applied on a tweaked element.
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. Supported, but there is too much inconsistency between browsers to be reliable.
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]
  1. Chrome and Opera add some extra space around the widget.
border ❌ No ✅ Yes
margin ✅ Yes ✅ Yes
padding ⚠️ Partial[1] ✅ Yes
  1. The padding is applied, but has no visual effect.
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. Supported, but there is too much inconsistency between browsers to be reliable.
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]
  1. IE9 does not support this property.
box-shadow ⚠️ Partial[1] ⚠️ Partial[1]
  1. IE9 does not support this property.

See also

Learning path

Advanced Topics