Tabla de compatibilidad de propiedades CSS para controles de formulario

Las siguientes tablas de compatibilidad intentan resumir el estado del soporte de CSS para formularios HTML. Debido a la complejidad de los formularios CSS y HTML, estas tablas no se pueden considerar una referencia perfecta. Sin embargo, le darán una buena idea de lo que se puede y no se puede hacer, lo que le ayudará al aprender a hacer las cosas.

Cómo leer las tablas

Valores

Para cada propiedad, hay cuatro valores posibles:

Si: Existe un soporte razonablemente consistente para la propiedad en todos los navegadores. Es posible que aún enfrente efectos secundarios extraños en ciertos casos extremos.
Parcial: Si bien la propiedad funciona, con frecuencia puede enfrentar efectos secundarios extraños o inconsistencias. Probablemente debería evitar estas propiedades a menos que primero domine esos efectos secundarios.
No: La propiedad simplemente no funciona o es tan inconsistente que no es confiable.
n.a.: La propiedad no tiene ningún significado para este tipo de widget.

Representación

Para cada propiedad hay dos representaciones posibles:

N (Normal): Indica que la propiedad se aplica tal cual
T (Retocada): Indica que la propiedad se aplica con la regla adicional como se muestra a continuación:

* {
  /* Turn off the native look and feel */
  -webkit-appearance: none;
  appearance: none;

/* for Internet Explorer */
  background: none;
}

Tablas de compatibilidad

Comportamientos globales

Algunos comportamientos son comunes a muchos navegadores a nivel global::

border, background, border-radius, height: El uso de una de estas propiedades puede desactivar parcial o totalmente la apariencia nativa de los widgets en algunos navegadores. Tenga cuidado cuando los use.
line-height: Esta propiedad se admite de forma inconsistente en todos los navegadores y debe evitarla.
text-decoration: Esta propiedad no es compatible con el navegador Opera en widgets de formulario.
text-overflow: Opera, Safari, y IE9 no admiten esta propiedad en widgets de formulario.
text-shadow: Opera no admite text-shadow en widgets de formularios e IE9 no lo admite en absoluto.

Text fields

See the text, search, and password input types.

Property	N	T	Note
CSS box model
`width`	Yes	Yes
`height`	Partial^[1][2]	Yes	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. On Windows 7, Internet Explorer 9 does not apply the border unless `background:none` is applied.
`border`	Partial^[1][2]	Yes	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. On Windows 7, Internet Explorer 9 does not apply the border unless `background:none` is applied.
`margin`	Yes	Yes
`padding`	Partial^[1][2]	Yes	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. On Windows 7, Internet Explorer 9 does not apply the border unless `background:none` is applied.
Text and font
`color`^[1]	Yes	Yes	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]	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	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. On Windows 7, Internet Explorer 9 does not apply the border unless `background:none` is applied.
`border-radius`	Partial^[1][2]	Yes	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. On Windows 7, Internet Explorer 9 does not apply the border unless `background:none` is applied. On Opera the `border-radius` property is applied only if an explicit border is set.
`box-shadow`	No	Partial^[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	This property is not applied on WebKit based browsers on Mac OSX or iOS.
`border`	Partial	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Yes	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]	On Opera the `border-radius` property is applied only if an explicit border is set.
`box-shadow`	No	Partial^[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]	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]	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]	Some browsers add extra margins and others stretch the widget.
`height`	No^[1]	No^[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]	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]	The property is applied, but in an inconsistent way between browsers on Mac OSX. 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]	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]	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]	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]	IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.
`text-decoration`	Partial^[1]	Partial^[1]	Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the `<select>` element.
`text-indent`	Partial^[1][2]	Partial^[1][2]	Most of the browsers only support this property on the `<select>` element. IE9 does not support this property.
`text-overflow`	No	No
`text-shadow`	Partial^[1][2]	Partial^[1][2]	Most of the browsers only support this property on the `<select>` element. IE9 does not support this property.
`text-transform`	Partial^[1]	Partial^[1]	Most of the browsers only support this property on the `<select>` element.
Border and background
`background`	Partial^[1]	Partial^[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]	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]	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]	IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.
`text-decoration`	No^[1]	No^[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]	Most of the browsers only support this property on the `<select>` element.
Border and background
`background`	Yes	Yes
`border-radius`	Yes^[1]	Yes^[1]	On Opera the `border-radius` property is applied only if an explicit border is set.
`box-shadow`	No	Partial^[1]	IE9 does not support this property.

Datalist

See the <datalist> and <input> elements and the list attribute.

Property	N	T
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]	Supported, but there is too much inconsistency between browsers to be reliable.
`letter-spacing`	Partial^[1]	Partial^[1]	Many browsers apply this property to the select button.
`text-align`	No	No
`text-decoration`	No	No
`text-indent`	Partial^[1]	Partial^[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]	Supported, but there is too much inconsistency between browsers to be reliable.
`border-radius`	No	No
`box-shadow`	No	Partial^[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 inconstency between browsers to be reliable.

Property	N	T
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	Opera handles this like a select widget with the same restriction.
`border`	Yes	Yes
`margin`	Yes	Yes
`padding`	No^[1]	Yes	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]	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]	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]	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]	Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.
`border`	No	Yes
`margin`	Yes	Yes
`padding`	Partial^[1]	Yes	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]	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]	IE9 does not support this property.
`box-shadow`	Partial^[1]	Partial^[1]	IE9 does not support this property.