mozilla

Revision 450263 of Property compatibility table for form widgets

  • Revision slug: Property_compatibility_table_for_form_widgets
  • Revision title: Property compatibility table for form widgets
  • Revision id: 450263
  • Created:
  • Creator: kscarfone
  • Is current revision? No
  • Comment Editorial review

Revision Content

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:

{{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("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.
{{cssxref("line-height")}}
This property is supported inconsistently across browsers and you should avoid it.
{{cssxref("text-decoration")}}
This property is not supported by Opera on form widgets.
{{cssxref("text-overflow")}}
Opera, Safari, and IE9 do not support this property on form widgets.
{{cssxref("text-shadow")}}
Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.

Text fields

Property N T Note
CSS box model
{{cssxref("width")}} Yes Yes  
{{cssxref("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.
{{cssxref("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.
{{cssxref("margin")}} Yes Yes  
{{cssxref("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
{{cssxref("color")}}[1] Yes Yes
  1. If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on {{HTMLElement("textarea")}}s.
{{cssxref("font")}} Yes Yes See the note about {{cssxref("line-height")}}
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} Yes Yes  
{{cssxref("text-decoration")}} Partial Partial See the note about Opera
{{cssxref("text-indent")}} Partial[1] Partial[1]
  1. IE9 supports this property only on {{HTMLElement("textarea")}}s, whereas Opera only supports it on single line text fields.
{{cssxref("text-overflow")}} Partial Partial  
{{cssxref("text-shadow")}} Partial Partial  
{{cssxref("text-transform")}} Yes Yes  
Border and background
{{cssxref("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.
{{cssxref("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 {{cssxref("border-radius")}} property is applied only if an explicit border is set.
{{cssxref("box-shadow")}} No Partial[1]
  1. IE9 does not support this property.

Buttons

Property N T Note
CSS box model
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Partial[1] Yes
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
{{cssxref("border")}} Partial Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Yes
  1. This property is not applied on WebKit based browsers on Mac OSX or iOS.
Text and font
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} Yes Yes See the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} No No  
{{cssxref("text-decoration")}} Partial Yes  
{{cssxref("text-indent")}} Yes Yes  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} Partial Partial  
{{cssxref("text-transform")}} Yes Yes  
Border and background
{{cssxref("background")}} Yes Yes  
{{cssxref("border-radius")}} Yes[1] Yes[1]
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
{{cssxref("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
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Partial[1] Partial[1]
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
{{cssxref("border")}} Yes Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Partial[1]
  1. On Opera, the spinners are zoomed in, which can hide the content of the field.
Text and font
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} Yes Yes See the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} Yes Yes  
{{cssxref("text-decoration")}} Partial Partial  
{{cssxref("text-indent")}} Yes Yes  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} Partial Partial  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} No No

Supported but there is too much inconsistency between browsers to be reliable.

{{cssxref("border-radius")}} No No
{{cssxref("box-shadow")}} No No

Check boxes and radio buttons

Property N T Note
CSS box model
{{cssxref("width")}} No[1] No[1]
  1. Some browsers add extra margins and others stretch the widget.
{{cssxref("height")}} No[1] No[1]
  1. Some browsers add extra margins and others stretch the widget.
{{cssxref("border")}} No No  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} No No  
Text and font
{{cssxref("color")}} N.A. N.A.  
{{cssxref("font")}} N.A. N.A.  
{{cssxref("letter-spacing")}} N.A. N.A.  
{{cssxref("text-align")}} N.A. N.A.  
{{cssxref("text-decoration")}} N.A. N.A.  
{{cssxref("text-indent")}} N.A. N.A.  
{{cssxref("text-overflow")}} N.A. N.A.  
{{cssxref("text-shadow")}} N.A. N.A.  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} No No  
{{cssxref("border-radius")}} No No  
{{cssxref("box-shadow")}} No No  

Select boxes (single line)

Firefox does not provide any way to change the down arrow on the {{HTMLElement("select")}} element.

Property N T Note
CSS box model
{{cssxref("width")}} Partial[1] Partial[1]
  1. This property is okay on the {{HTMLElement("select")}} element, but it cannot be the case on the {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.
{{cssxref("height")}} No Yes  
{{cssxref("border")}} Partial Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("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 {{HTMLElement("select")}} element, but is inconsistently handled on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.
Text and font
{{cssxref("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 {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.
{{cssxref("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 {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.
{{cssxref("letter-spacing")}} Partial[1] Partial[1]
  1. IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}}, and {{HTMLElement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.
{{cssxref("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.
{{cssxref("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 {{HTMLElement("select")}} element.
{{cssxref("text-indent")}} Partial[1][2] Partial[1][2]
  1. Most of the browsers only support this property on the {{HTMLElement("select")}} element.
  2. IE9 does not support this property.
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} Partial[1][2] Partial[1][2]
  1. Most of the browsers only support this property on the {{HTMLElement("select")}} element.
  2. IE9 does not support this property.
{{cssxref("text-transform")}} Partial[1] Partial[1]
  1. Most of the browsers only support this property on the {{HTMLElement("select")}} element.
Border and background
{{cssxref("background")}} Partial[1] Partial[1]
  1. Most of the browsers only support this property on the {{HTMLElement("select")}} element.
{{cssxref("border-radius")}} Partial[1] Partial[1]
{{cssxref("box-shadow")}} No Partial[1]

Select boxes (multiline)

Property N T Note
CSS box model
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Yes Yes  
{{cssxref("border")}} Yes Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Partial[1]
  1. Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{HTMLElement("select")}} element.
Text and font
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} Yes Yes See the note about {{cssxref("line-height")}}.
{{cssxref("letter-spacing")}} Partial[1] Partial[1]
  1. IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}}, and {{HTMLElement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.
{{cssxref("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.
{{cssxref("text-decoration")}} No[1] No[1]
  1. Only supported by Firefox and IE9+.
{{cssxref("text-indent")}} No No  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} No No  
{{cssxref("text-transform")}} Partial[1] Partial[1]
  1. Most of the browsers only support this property on the {{HTMLElement("select")}} element.
Border and background
{{cssxref("background")}} Yes Yes  
{{cssxref("border-radius")}} Yes[1] Yes[1]
  1. On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.
{{cssxref("box-shadow")}} No Partial[1]
  1. IE9 does not support this property.

Datalist

Property N T Note
CSS box model
{{cssxref("width")}} No No  
{{cssxref("height")}} No No  
{{cssxref("border")}} No No  
{{cssxref("margin")}} No No  
{{cssxref("padding")}} No No  
Text and font
{{cssxref("color")}} No No  
{{cssxref("font")}} No No  
{{cssxref("letter-spacing")}} No No  
{{cssxref("text-align")}} No No  
{{cssxref("text-decoration")}} No No  
{{cssxref("text-indent")}} No No  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} No No  
{{cssxref("text-transform")}} No No  
Border and background
{{cssxref("background")}} No No  
{{cssxref("border-radius")}} No No  
{{cssxref("box-shadow")}} No No  

File picker

Property N T Note
CSS box model
{{cssxref("width")}} No No  
{{cssxref("height")}} No No  
{{cssxref("border")}} No No  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} No No  
Text and font
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} No[1] No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
{{cssxref("letter-spacing")}} Partial[1] Partial[1]
  1. Many browsers apply this property to the select button.
{{cssxref("text-align")}} No No  
{{cssxref("text-decoration")}} No No  
{{cssxref("text-indent")}} Partial[1] Partial[1]
  1. It acts more or less like an extra left margin outside the widget.
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} No No  
{{cssxref("text-transform")}} No No  
Border and background
{{cssxref("background")}} No[1] No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
{{cssxref("border-radius")}} No No  
{{cssxref("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
{{cssxref("width")}} No No  
{{cssxref("height")}} No No  
{{cssxref("border")}} No No  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} No No  
Text and font
{{cssxref("color")}} No No  
{{cssxref("font")}} No No  
{{cssxref("letter-spacing")}} No No  
{{cssxref("text-align")}} No No  
{{cssxref("text-decoration")}} No No  
{{cssxref("text-indent")}} No No  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} No No  
{{cssxref("text-transform")}} No No  
Border and background
{{cssxref("background")}} No No  
{{cssxref("border-radius")}} No No  
{{cssxref("box-shadow")}} No No  

Color pickers

There is currently not enough implementation to get realiable behaviors.

Property N T Note
CSS box model
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} No[1] Yes
  1. Opera handles this like a select widget with the same restriction.
{{cssxref("border")}} Yes Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} No[1] Yes
  1. Opera handles this like a select widget with the same restriction.
Text and font
{{cssxref("color")}} N.A. N.A.  
{{cssxref("font")}} N.A. N.A.  
{{cssxref("letter-spacing")}} N.A. N.A.  
{{cssxref("text-align")}} N.A. N.A.  
{{cssxref("text-decoration")}} N.A. N.A.  
{{cssxref("text-indent")}} N.A. N.A.  
{{cssxref("text-overflow")}} N.A. N.A.  
{{cssxref("text-shadow")}} N.A. N.A.  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} No[1] No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
{{cssxref("border-radius")}} No[1] No[1]
{{cssxref("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
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Yes Yes  
{{cssxref("border")}} Partial Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Yes Partial[1]
  1. Chrome hides the {{HTMLElement("progress")}} and {{HTMLElement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.
Text and font
{{cssxref("color")}} N.A. N.A.  
{{cssxref("font")}} N.A. N.A.  
{{cssxref("letter-spacing")}} N.A. N.A.  
{{cssxref("text-align")}} N.A. N.A.  
{{cssxref("text-decoration")}} N.A. N.A.  
{{cssxref("text-indent")}} N.A. N.A.  
{{cssxref("text-overflow")}} N.A. N.A.  
{{cssxref("text-shadow")}} N.A. N.A.  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} No[1] No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
{{cssxref("border-radius")}} No[1] No[1]
{{cssxref("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
{{cssxref("width")}} Yes Yes  
{{cssxref("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.
{{cssxref("border")}} No Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Yes
  1. The {{cssxref("padding")}} is applied, but has no visual effect.
Text and font
{{cssxref("color")}} N.A. N.A.  
{{cssxref("font")}} N.A. N.A.  
{{cssxref("letter-spacing")}} N.A. N.A.  
{{cssxref("text-align")}} N.A. N.A.  
{{cssxref("text-decoration")}} N.A. N.A.  
{{cssxref("text-indent")}} N.A. N.A.  
{{cssxref("text-overflow")}} N.A. N.A.  
{{cssxref("text-shadow")}} N.A. N.A.  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} No[1] No[1]
  1. Supported, but there is too much inconsistency between browsers to be reliable.
{{cssxref("border-radius")}} No[1] No[1]
{{cssxref("box-shadow")}} No[1] No[1]

Image buttons

Property N T Note
CSS box model
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Yes Yes  
{{cssxref("border")}} Yes Yes  
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Yes Yes  
Text and font
{{cssxref("color")}} N.A. N.A.  
{{cssxref("font")}} N.A. N.A.  
{{cssxref("letter-spacing")}} N.A. N.A.  
{{cssxref("text-align")}} N.A. N.A.  
{{cssxref("text-decoration")}} N.A. N.A.  
{{cssxref("text-indent")}} N.A. N.A.  
{{cssxref("text-overflow")}} N.A. N.A.  
{{cssxref("text-shadow")}} N.A. N.A.  
{{cssxref("text-transform")}} N.A. N.A.  
Border and background
{{cssxref("background")}} Yes Yes  
{{cssxref("border-radius")}} Partial[1] Partial[1]
  1. IE9 does not support this property.
{{cssxref("box-shadow")}} Partial[1] Partial[1]
  1. IE9 does not support this property.

 

Revision Source

<p>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.</p>
<h2 id="How_to_read_the_tables">How to read the tables</h2>
<h3 id="Values">Values</h3>
<p>For each property, there are four possible values:</p>
<dl>
  <dt>
    YES</dt>
  <dd>
    There's reasonably consistent support for the property across browsers. You may still face strange side effects in certain edge cases.</dd>
  <dt>
    PARTIAL</dt>
  <dd>
    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.</dd>
  <dt>
    NO</dt>
  <dd>
    The property simply doesn't work or is so inconsistent that it's not reliable.</dd>
  <dt>
    N.A.</dt>
  <dd>
    The property has no meaning for this type of widget.</dd>
</dl>
<h3 id="Rendering">Rendering</h3>
<p>For each property there are two possible renderings:</p>
<dl>
  <dt>
    N (Normal)</dt>
  <dd>
    Indicates that the property is applied as it is</dd>
  <dt>
    T (Tweaked)</dt>
  <dd>
    Indicates that the property is applied with the extra rule below:</dd>
</dl>
<pre class="brush: css">
* {
/* 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;
}</pre>
<h2 id="Compatibility_tables">Compatibility tables</h2>
<h3 id="Global_behaviors">Global behaviors</h3>
<p>Some behaviors are common to many browsers at a global level:</p>
<dl>
  <dt>
    {{cssxref("border")}}, {{cssxref("background")}}, {{cssxref("border-radius")}}, {{cssxref("height")}}</dt>
  <dd>
    Using one of these properties can partially or fully turn off the native look &amp; feel of widgets on some browsers. Be careful when you use them.</dd>
  <dt>
    {{cssxref("line-height")}}</dt>
  <dd>
    This property is supported inconsistently across browsers and you should avoid it.</dd>
  <dt>
    {{cssxref("text-decoration")}}</dt>
  <dd>
    This property is not supported by Opera on form widgets.</dd>
  <dt>
    {{cssxref("text-overflow")}}</dt>
  <dd>
    Opera, Safari, and IE9 do not support this property on form widgets.</dd>
  <dt>
    {{cssxref("text-shadow")}}</dt>
  <dd>
    Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.</dd>
</dl>
<h3 id="Text_fields">Text fields</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
          <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
          <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields.</li>
          <li>On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>If the {{cssxref("border-color")}} property is not set, some WebKit based browsers will apply the {{cssxref("color")}} property to the border as well as the font on {{HTMLElement("textarea")}}s.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>See the note about {{cssxref("line-height")}}</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>See the note about Opera</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 supports this property only on {{HTMLElement("textarea")}}s, whereas Opera only supports it on single line text fields.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>WebKit browsers (mostly on Mac OSX and iOS) use the native look &amp; feel for the search fields. Therefore, it's required to use <code>-webkit-appearance:none</code> to be able to apply this property to search fields. On Windows 7, Internet Explorer 9 does not apply the border unless <code>background:none</code> is applied.</li>
          <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Buttons">Buttons</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>This property is not applied on WebKit based browsers on Mac OSX or iOS.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>See the note about {{cssxref("line-height")}}.</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
      <td>
        <ol>
          <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Number">Number</h3>
<p>On browsers that implement the <code>number</code> 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.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>On Opera, the spinners are zoomed in, which can hide the content of the field.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>See the note about {{cssxref("line-height")}}.</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td colspan="1" rowspan="3">
        <p>Supported but there is too much inconsistency between browsers to be reliable.</p>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
    </tr>
  </tbody>
</table>
<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Some browsers add extra margins and others stretch the widget.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Some browsers add extra margins and others stretch the widget.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="Select_boxes_(single_line)">Select boxes (single line)</h3>
<p>Firefox does not provide any way to change the down arrow on the {{HTMLElement("select")}} element.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>This property is okay on the {{HTMLElement("select")}} element, but it cannot be the case on the {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
      <td>
        <ol>
          <li>The property is applied, but in an inconsistent way between browsers on Mac OSX.</li>
          <li>The property is well applied on the {{HTMLElement("select")}} element, but is inconsistently handled on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>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 {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>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 {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}}, and {{HTMLElement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 on Windows 7 and WebKit based browsers on Mac OSX do not support this property on this widget.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Only Firefox provides full support for this property. Opera does not support this property at all and other browsers only support it on the {{HTMLElement("select")}} element.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td>
        <ol>
          <li>Most of the browsers only support this property on the {{HTMLElement("select")}} element.</li>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1][2]</sup></td>
      <td>
        <ol>
          <li>Most of the browsers only support this property on the {{HTMLElement("select")}} element.</li>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Most of the browsers only support this property on the {{HTMLElement("select")}} element.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td colspan="1" rowspan="3">
        <ol>
          <li>Most of the browsers only support this property on the {{HTMLElement("select")}} element.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
    </tr>
  </tbody>
</table>
<h3 id="Select_boxes_(multiline)">Select boxes (multiline)</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{HTMLElement("select")}} element.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>See the note about {{cssxref("line-height")}}.</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}}, and {{HTMLElement("optgroup")}} elements; WebKit based browsers on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 on Windows 7 and WebKit based browser on Mac OSX do not support this property on this widget.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Only supported by Firefox and IE9+.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Most of the browsers only support this property on the {{HTMLElement("select")}} element.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[1]</sup></td>
      <td>
        <ol>
          <li>On Opera the {{cssxref("border-radius")}} property is applied only if an explicit border is set.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Datalist">Datalist</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="File_picker">File picker</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Many browsers apply this property to the select button.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>It acts more or less like an extra left margin outside the widget.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h3 id="Date_pickers">Date pickers</h3>
<p>Many properies are supported but there is to much inconstency between browsers to be reliable.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h3 id="Color_pickers">Color pickers</h3>
<p>There is currently not enough implementation to get realiable behaviors.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Opera handles this like a select widget with the same restriction.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Opera handles this like a select widget with the same restriction.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td colspan="1" rowspan="3">
        <ol>
          <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
  </tbody>
</table>
<h3 id="Meters_and_progress">Meters and progress</h3>
<p>There is currently not enough implementation to get realiable behaviors.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Chrome hides the {{HTMLElement("progress")}} and {{HTMLElement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td colspan="1" rowspan="3">
        <ol>
          <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
  </tbody>
</table>
<h3 id="Range">Range</h3>
<p>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.</p>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td>
        <ol>
          <li>Chrome and Opera add some extra space around the widget, whereas Opera on Windows 7 stretches the range grip.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>The {{cssxref("padding")}} is applied, but has no visual effect.</li>
        </ol>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td colspan="1" rowspan="3">
        <ol>
          <li>Supported, but there is too much inconsistency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[1]</sup></td>
    </tr>
  </tbody>
</table>
<h3 id="Image_buttons">Image buttons</h3>
<table>
  <thead>
    <tr>
      <th scope="col">Property</th>
      <th scope="col" style="text-align: center;">N</th>
      <th scope="col" style="text-align: center;">T</th>
      <th scope="col">Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>CSS box model</em></th>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("width")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("height")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("margin")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("padding")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Text and font</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("color")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("font")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("letter-spacing")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-align")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-decoration")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-indent")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-overflow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-shadow")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("text-transform")}}</th>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td style="text-align: center; vertical-align: top;">N.A.</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="4" scope="col"><em>Border and background</em></th>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}</th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td colspan="1">&nbsp;</td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td colspan="1">
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("box-shadow")}}</th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[1]</sup></td>
      <td colspan="1">
        <ol>
          <li>IE9 does not support this property.</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
Revert to this revision