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 |
|
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
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-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] |
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 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
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] |
|