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

* Your first HTML form
* How to structure an HTML form
* The native form widgets
* HTML5 input types
* Additional form controls
* UI pseudo-classes
* Styling HTML forms
* Form data validation
* Sending form data
### 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**