Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.
Your Search Results

    Property compatibility table for form widgets

    This article needs a technical review. How you can help.

    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 simply 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:
    * {
/* This turn off the native look and feel on WebKit based browsers */
  -webkit-appearance: none;

/* This turn off the native look and feel on Gecko based browsers */
  -moz-appearance: none;

/* This turn off the native look and feel on several different browsers 
   including Opera, Internet Explorer and Firefox */
  background: none;
}

    Compatibility tables

    Global behaviors

    Some behaviors are common to many browsers at a global level:

    border, background, border-radius, height
    Using one of these properties can partially or fully turn off the native look & feel of widgets on some browsers. Be careful when you use them.
    line-height
    This property is supported inconsistently across browsers and you should avoid it.
    text-decoration
    This property is not supported by Opera on form widgets.
    text-overflow
    Opera, Safari, and IE9 do not support this property on form widgets.
    text-shadow
    Opera does not support text-shadow on form widgets and IE9 does not support it at all.

    Text fields

    Property N T Note
    CSS box model
    width Yes Yes  
    height Partial[1][2] 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.
    2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    border Partial[1][2] 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.
    2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    margin Yes Yes  
    padding Partial[1][2] 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.
    2. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    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. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    border-radius Partial[1][2] 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. On Windows 7, Internet Explorer 9 does not apply the border unless background:none is applied.
    2. 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.

    Buttons

    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

    On browsers that implement the number widget, there is no standard way to change the style of spinners used to change the value of the field. It is worth noting that the spinners on Safari are 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

    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)

    Firefox does not provide any way to change the down arrow on the <select> element.

    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-align No[1] No[1]
    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]
    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]
    1. Most of the browsers only support this property on the <select> element.
    2. IE9 does not support this property.
    text-overflow No No  
    text-shadow Partial[1][2] Partial[1][2]
    1. Most of the browsers only support this property on the <select> element.
    2. IE9 does not support this property.
    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]

    Select boxes (multiline)

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

    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

    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

    Many properies are supported but there is to 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

    There is currently not enough implementation to get realiable behaviors.

    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

    There is currently not enough implementation to get realiable behaviors.

    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

    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, whereas Opera on Windows 7 stretches the range grip.
    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

    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.

     

    Document Tags and Contributors

    Tags: 
     Contributors to this page: Jeremie, kscarfone, james_oh, Sheppy
     Last updated by: Jeremie,