Property compatibility table for form widgets

  • Revision slug: Property_compatibility_table_for_form_widgets
  • Revision title: Property compatibility table for form widgets
  • Revision id: 348669
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

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'll give you good insight into what can be done and what can't, and will help you learn how to do things.

How to read the tables

Values

For each property, there are four different possible values:

YES
There's reasonably consistent support for the property across browsers. You may still face strange side-effects in certain edge cases, though.
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 properly has no meaning for this type of widget.

Rendering

For each property there are two possible rendering:

N (Normal)
Indicates that the property is applied "as-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

Text fields

CSS box model

Property N T Note
{{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")}}[1] Partial[2][3] Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers
  2. 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.
  3. 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

Property N T Note
{{cssxref("color")}}[1] Yes Yes
  1. If the {{cssxref("border-color")}} property is not set, some WebKit based browser will apply the {{cssxref("color")}} property to the border as well as the font on {{HTMLElement("textarea")}}s.
{{cssxref("font")}} Partial[1] Partial[1]
  1. the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} Yes Yes  
{{cssxref("text-decoration")}} Partial[1] Partial[1]
  1. This property is not supported by Opera on form widgets.
{{cssxref("text-indent")}} Partial[1] Partial[1]
  1. IE9 support this property only on {{HTMLElement("textarea")}}s where Opera only support it on single line text fields.
{{cssxref("text-overflow")}} Partial[1] Partial[1]
  1. Opera, Safari and IE9 does not support {{cssxref("text-overflow")}} on form widgets.
{{cssxref("text-shadow")}} Partial[1] Partial[1]
  1. Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.
{{cssxref("text-transform")}} Yes Yes  

Border and background

Property N T Note
{{cssxref("background")}}[1] Partial[2] Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers.
  2. 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")}}[1] Partial[2][3] Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers.
  2. 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.
  3. On Opera the {{cssxref("border-radius")}} property is apply only if an explicit border is set.
{{cssxref("box-shadow")}} No Partial[1]
  1. IE9 does not support this property.

Buttons

CSS box model

Property N T Note
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}}[1] Partial[2] Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers
  2. This property is not applied on WebKit based browser on Mac OSX or iOS
{{cssxref("border")}}[1] Partial Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Yes
  1. This property is not applied on WebKit based browser on Mac OSX or iOS

Text and font

Property N T Note
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} Partial[1] Partial[1]
  1. the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} No No  
{{cssxref("text-decoration")}} Partial[1] Yes
  1. This property is not supported by Opera on form widgets.
{{cssxref("text-indent")}} Yes Yes  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} Partial[1] Partial[1]
  1. Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.
{{cssxref("text-transform")}} Yes Yes  

Border and background

Property N T Note
{{cssxref("background")}}[1] Yes Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers.
{{cssxref("border-radius")}}[1] Yes[2] Yes[2]
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers.
  2. On Opera the {{cssxref("border-radius")}} property is apply 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 the spinners used to change the value of the field. It worth noting that on Safari, the spinners are outside the field.

CSS box model

Property N T Note
{{cssxref("width")}} Yes Yes  
{{cssxref("height")}} Partial[1] Partial[1]
  1. On Opera, the spinners are zoomed and can, in some cases hide the content of the field
{{cssxref("border")}}[1] Yes Yes
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers
{{cssxref("margin")}} Yes Yes  
{{cssxref("padding")}} Partial[1] Partial[1]
  1. On Opera, the spinners are zoomed and can, in some cases hide the content of the field

Text and font

Property N T Note
{{cssxref("color")}} Yes Yes  
{{cssxref("font")}} Partial[1] Partial[1]
  1. the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.
{{cssxref("letter-spacing")}} Yes Yes  
{{cssxref("text-align")}} Yes Yes  
{{cssxref("text-decoration")}} Partial[1] Partial[1]
  1. This property is not supported by Opera on form widgets.
{{cssxref("text-indent")}} Yes Yes  
{{cssxref("text-overflow")}} No No  
{{cssxref("text-shadow")}} Partial[1] Partial[1]
  1. Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.
{{cssxref("text-transform")}} N.A. N.A.  

Border and background

Property N T Note
{{cssxref("background")}}[1] No[2] No[2]
  1. Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers.
  2. Supported but there is to much inconstency between browsers to be reliable.
{{cssxref("border-radius")}}[1] No[2] No[2]
{{cssxref("box-shadow")}} No[2] No[2]

 

CSS box model

Properties Check boxes & radio buttons Select[7] Select multiple Datalist File picker Date Pickers Color Picker Meter & progress Range[14] Image
N T N T N T N T N T N T N T N T N T N T
{{cssxref("width")}} No[6] No[6] Partial[8] Partial[8] Yes Yes No No No No No No Yes Yes Yes Yes Yes Yes Yes Yes
{{cssxref("height")}} No[6] No[6] No Yes Yes Yes No No No No No No No[12] Yes Yes Yes Partial[15] Partial[15] Yes Yes
{{cssxref("border")}}[2] No No Partial Yes Yes Yes No No No No No No Yes Yes Partial Yes No Yes Yes Yes
{{cssxref("margin")}} Yes Yes Yes Yes Yes Yes No No Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes Yes
{{cssxref("padding")}} No No No[9] Partial[10] Partial[11] Partial[11] No No No No No No No[12] Yes Yes Partial[13] Partial[16] Yes Yes Yes

Text and font

Properties Number[4] Check boxes & radio buttons Select[7] Select multiple Datalist File picker Date Pickers Color Picker Meter & progress Range[14] Image
N T N T N T N T N T N T N T N T N T N T
{{cssxref("color")}} N.A. N.A. Partial[23] Partial[23] Yes Yes No No Yes Yes No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("font")}} N.A. N.A. Partial[18][23] Partial[18][23] Partial[18] Partial[18] No No No[30] No[30] No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("letter-spacing")}} N.A. N.A. Partial[24] Partial[24] Partial[24] Partial[24] No No Partial[31] Partial[31] No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-align")}} N.A. N.A. No[25] No[25] No[25] No[25] No No No No No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-decoration")}} N.A. N.A. Partial[26] Partial[26] No[27] No[27] No No No No No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-indent")}} N.A. N.A. Partial[28][29] Partial[28][29] No No No No Partial[32] Partial[32] No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-overflow")}} N.A. N.A. No No No No No No No No No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-shadow")}} N.A. N.A. Partial[22][28] Partial[22][28] No No No No No No No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.
{{cssxref("text-transform")}} N.A. N.A. Partial[28] Partial[28] Partial[28] Partial[28] No No No No No[30] No[30] N.A. N.A. N.A. N.A. N.A. N.A. N.A. N.A.

Border and background

Properties Check boxes & radio buttons Select[7] Select multiple Datalist File picker Date Pickers Color Picker Meter & progress Range[14] Image
N T N T N T N T N T N T N T N T N T N T
{{cssxref("background")}}[2] No No Partial[28] Partial[28] Yes Yes No No No[30] No[30] No[30] No[30] No[30] No[30] No[30] No[30] No[30] No[30] Yes Yes
{{cssxref("border-radius")}}[2] No No Partial[28] Partial[28] Yes[33] Yes[33] No No No No No[30] No[30] No[30] No[30] No[30] No[30] No[30] No[30] Partial[29] Partial[29]
{{cssxref("box-shadow")}} No No No Partial[29] No Partial[29] No No No Partial[29] No[30] No[30] No[30] No[30] No[30] No[30] No[30] No[30] Partial[29] Partial[29]

Implementation notes

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: Using this property turn off (sometimes partialy) the native look & feel of the widget on some browsers

3: This property is not applied on WebKit based browser on Mac OSX or iOS

4: On browsers that implement the number widget, there is no standard way to change the style of the spinners used to change the value of the field. It worth noting that on Safari, the spinners are outside the field.

5: On Opera, the spinners are zoomed and can, in some cases hide the content of the field

6: Some browsers add extra margin in some cases and stretch the widget in other cases

7: On some browsers, it's not possible to change the style of the dropdown arrow.

8: This property is okay on the {{HTMLElement("select")}} element, but it cannot the case on the {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.

9: The property is applied but in an inconsistent way between browsers on Mac OSX.

10: the property is well applied on the {{HTMLElement("select")}} element but is inconsistently handled on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} element.

11: Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{HTMLElement("select")}} element.

12: Opera on Mac OSX handle this like a select widget with the same restriction.

13: Chrome hide the {{HTMLElement("progress")}} and {{HTMLElement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.

14: 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.

15: Chrome and Opera add some extra space around the widget and Opera on Windows 7 stretch the range grip.

16: The {{cssxref("padding")}} is applied but has no visual effect.

17: If the {{cssxref("border-color")}} property is not set, WebKit based browser will apply the {{cssxref("color")}} property to the border as well as the font on {{HTMLElement("textarea")}}s.

18: the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.

19: This property is not supported by Opera on form widgets.

20: IE9 support this property only on {{HTMLElement("textarea")}}s where Opera only support it on single line text fields.

21: Opera, Safari and IE9 does not support {{cssxref("text-overflow")}} on form widgets.

22: Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.

23: On Mac OSX, WebKit based browser do not support this property on native widgets and they does not support it at all, as well as Opera, on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.

24: IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements; WebKit based browser on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.

25: IE9 on Windows 7 and WebKit based browser On Mac OSX do not support this property on this widget.

26: Only Firefox provide a full support for this property. Opera does not support it at all and other browsers only support it on the {{HTMLElement("select")}} element.

27: Only support by Firefox and IE9.

28: Most of the browsers only support this property on the {{HTMLElement("select")}} element

29: IE9 does not support this property.

30: Supported but there is to much inconstency between browsers to be reliable.

31: Many browsers also apply the property to the select button.

32: It acts more or less like an extra left margin outside the widget.

33: On Opera the {{cssxref("border-radius")}} property is apply only if an explicit border is set.

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'll give you good insight into what can be done and what can't, and will help you learn how to do things.</p>
<h2 id="How_to_read_the_tables">How to read the tables</h2>
<h3>Values</h3>
<p>For each property, there are four different 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, though.</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 properly has no meaning for this type of widget.</dd>
</dl>
<h3>Rendering</h3>
<p>For each property there are two possible rendering:</p>
<dl>
  <dt>
    N (Normal)</dt>
  <dd>
    Indicates that the property is applied "as-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>Text fields</h3>
<h4>CSS box model</h4>
<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 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")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2][3]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers</li>
          <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>
</table>
<h4>Text and font</h4>
<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 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 browser 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(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>the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.</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(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<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 not supported by Opera on form widgets.</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]</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 support this property only on {{HTMLElement("textarea")}}s where Opera only support 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<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, Safari and IE9 does not support {{cssxref("text-overflow")}} on form widgets.</li>
        </ol>
      </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]</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("text-shadow")}} on form widgets and IE9 does not support it at all.</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(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>
</table>
<h4>Border and background</h4>
<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 scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers.</li>
          <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")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2][3]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers.</li>
          <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 apply 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>Buttons</h3>
<h4>CSS box model</h4>
<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 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")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 255, 102); vertical-align: top;">Partial<sup>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes</td>
      <td>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers</li>
          <li>This property is not applied on WebKit based browser on Mac OSX or iOS</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}<sup>[1]</sup></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>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers</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]</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 browser on Mac OSX or iOS</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h4>Text and font</h4>
<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 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, 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>the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.</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(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<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 supported by Opera on form widgets.</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(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<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("text-shadow")}} on form widgets and IE9 does not support it at all.</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(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>
</table>
<h4>Border and background</h4>
<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 scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}<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>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102); vertical-align: top;">Yes<sup>[2]</sup></td>
      <td>
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers.</li>
          <li>On Opera the {{cssxref("border-radius")}} property is apply 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>Number</h3>
<p>On browsers that implement the <code>number</code> widget, there is no standard way to change the style of the spinners used to change the value of the field. It worth noting that on Safari, the spinners are outside the field.</p>
<h4>CSS box model</h4>
<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 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 and can, in some cases hide the content of the field</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="vertical-align: top;">{{cssxref("border")}}<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>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers</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]</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 and can, in some cases hide the content of the field</li>
        </ol>
      </td>
    </tr>
  </tbody>
</table>
<h4>Text and font</h4>
<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 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, 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>the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.</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(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<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 not supported by Opera on form widgets.</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(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<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("text-shadow")}} on form widgets and IE9 does not support it at all.</li>
        </ol>
      </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>
</table>
<h4>Border and background</h4>
<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 scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("background")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[2]</sup></td>
      <td colspan="1" rowspan="3">
        <ol>
          <li>Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers.</li>
          <li>Supported but there is to much inconstency between browsers to be reliable.</li>
        </ol>
      </td>
    </tr>
    <tr>
      <th scope="row" style="white-space: nowrap; vertical-align: top;">{{cssxref("border-radius")}}<sup>[1]</sup></th>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[2]</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>[2]</sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153); vertical-align: top;">No<sup>[2]</sup></td>
    </tr>
  </tbody>
</table>
<h3 id="CSS_box_model">&nbsp;</h3>
<h3 id="CSS_box_model">CSS box model</h3>
<table>
  <thead>
    <tr>
      <th colspan="1" rowspan="2" scope="col">Properties</th>
      <th colspan="2" scope="col" style="text-align: center;">Check boxes &amp; radio buttons</th>
      <th colspan="2" scope="col" style="text-align: center;">Select<sup><a href="#note-7" title="#note-7">[7]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Select multiple</th>
      <th colspan="2" scope="col" style="text-align: center;">Datalist</th>
      <th colspan="2" scope="col" style="text-align: center;">File picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Date Pickers</th>
      <th colspan="2" scope="col" style="text-align: center;">Color Picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Meter &amp; progress</th>
      <th colspan="2" scope="col" style="text-align: center;">Range<sup><a href="#note-14" title="#note-14">[14]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Image</th>
    </tr>
    <tr>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>{{cssxref("width")}}</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-6" title="#note-6">[6]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-6" title="#note-6">[6]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<a href="#note-8" title="#note-7"><sup>[8]</sup></a></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<a href="#note-8" title="#note-7"><sup>[8]</sup></a></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
    <tr>
      <td>{{cssxref("height")}}</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-6" title="#note-6">[6]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-6" title="#note-6">[6]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-12" title="#note-12">[12]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-15" title="#note-15">[15]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-15" title="#note-15">[15]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
    <tr>
      <td>{{cssxref("border")}}<a href="#note-2" title="#note-2"><sup>[2]</sup></a></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
    <tr>
      <td>{{cssxref("margin")}}</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
    <tr>
      <td>{{cssxref("padding")}}</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-9" title="#note-9">[9]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-10" title="#note-10">[10]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-11" title="#note-11">[11]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-11" title="#note-11">[11]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-12" title="#note-12">[12]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-13" title="#note-13">[13]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-16" title="#note-16">[16]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
  </tbody>
</table>
<h3 id="Text_and_font">Text and font</h3>
<table>
  <thead>
    <tr>
      <th colspan="1" rowspan="2" scope="col">Properties</th>
      <th colspan="2" scope="col" style="text-align: center;">Number<a href="#note-4" title="#note-4"><sup>[4]</sup></a></th>
      <th colspan="2" scope="col" style="text-align: center;">Check boxes &amp; radio buttons</th>
      <th colspan="2" scope="col" style="text-align: center;">Select<sup><a href="#note-7" title="#note-7">[7]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Select multiple</th>
      <th colspan="2" scope="col" style="text-align: center;">Datalist</th>
      <th colspan="2" scope="col" style="text-align: center;">File picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Date Pickers</th>
      <th colspan="2" scope="col" style="text-align: center;">Color Picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Meter &amp; progress</th>
      <th colspan="2" scope="col" style="text-align: center;">Range<sup><a href="#note-14" title="#note-14">[14]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Image</th>
    </tr>
    <tr>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("color")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-23" title="#note-23">[23]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-23" title="#note-23">[23]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("font")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-18" title="#note-18">[18]</a><a href="#note-23" title="#note-23">[23]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-18" title="#note-18">[18]</a><a href="#note-23" title="#note-23">[23]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-18" title="#note-18">[18]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-18" title="#note-18">[18]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("letter-spacing")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-24" title="#note-24">[24]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-24" title="#note-24">[24]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-24" title="#note-24">[24]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-24" title="#note-24">[24]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-31" title="#note-31">[31]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-31" title="#note-31">[31]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-align")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-25" title="#note-25">[25]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-25" title="#note-25">[25]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-25" title="#note-25">[25]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-25" title="#note-25">[25]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-decoration")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-26" title="#note-26">[26]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-26" title="#note-26">[26]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-27" title="#note-27">[27]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-27" title="#note-27">[27]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-indent")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-32" title="#note-32">[32]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-32" title="#note-32">[32]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-overflow")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-shadow")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-22" title="#note-22">[22]</a><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-22" title="#note-22">[22]</a><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("text-transform")}}</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
      <td style="text-align: center;">N.A.</td>
    </tr>
  </tbody>
</table>
<h3 id="Border_and_background">Border and background</h3>
<table>
  <thead>
    <tr>
      <th colspan="1" rowspan="2" scope="col">Properties</th>
      <th colspan="2" scope="col" style="text-align: center;">Check boxes &amp; radio buttons</th>
      <th colspan="2" scope="col" style="text-align: center;">Select<sup><a href="#note-7" title="#note-7">[7]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Select multiple</th>
      <th colspan="2" scope="col" style="text-align: center;">Datalist</th>
      <th colspan="2" scope="col" style="text-align: center;">File picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Date Pickers</th>
      <th colspan="2" scope="col" style="text-align: center;">Color Picker</th>
      <th colspan="2" scope="col" style="text-align: center;">Meter &amp; progress</th>
      <th colspan="2" scope="col" style="text-align: center;">Range<sup><a href="#note-14" title="#note-14">[14]</a></sup></th>
      <th colspan="2" scope="col" style="text-align: center;">Image</th>
    </tr>
    <tr>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">N</th>
      <th scope="col" style="text-align: center; vertical-align: middle;">T</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("background")}}<a href="#note-2" title="#note-2"><sup>[2]</sup></a></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("border-radius")}}<a href="#note-2" title="#note-2"><sup>[2]</sup></a></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-28" title="#note-28">[28]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes<sup><a href="#note-33" title="#note-33">[33]</a></sup></td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes<sup><a href="#note-33" title="#note-33">[33]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
    </tr>
    <tr>
      <td style="white-space: nowrap;">{{cssxref("box-shadow")}}</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No</td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 153, 153);">No<sup><a href="#note-30" title="#note-30">[30]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
      <td style="text-align: center; background-color: rgb(255, 255, 102);">Partial<sup><a href="#note-29" title="#note-29">[29]</a></sup></td>
    </tr>
  </tbody>
</table>
<h2 id="Implementation_notes">Implementation notes</h2>
<p><a name="note-1"><strong>1:</strong></a> 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.</p>
<p><a name="note-2"><strong>2:</strong></a> Using this property turn off (sometimes partialy) the native look &amp; feel of the widget on some browsers</p>
<p><a name="note-3"><strong>3:</strong></a> This property is not applied on WebKit based browser on Mac OSX or iOS</p>
<p><a name="note-4"><strong>4:</strong></a> On browsers that implement the <code>number</code> widget, there is no standard way to change the style of the spinners used to change the value of the field. It worth noting that on Safari, the spinners are outside the field.</p>
<p><a name="note-5"><strong>5:</strong></a> On Opera, the spinners are zoomed and can, in some cases hide the content of the field</p>
<p><a name="note-6"><strong>6:</strong></a> Some browsers add extra margin in some cases and stretch the widget in other cases</p>
<p><a name="note-7"><strong>7:</strong></a> On some browsers, it's not possible to change the style of the dropdown arrow.</p>
<p><a name="note-8"><strong>8:</strong></a> This property is okay on the {{HTMLElement("select")}} element, but it cannot the case on the {{HTMLElement("option")}} or {{HTMLElement("optgroup")}} elements.</p>
<p><a name="note-9"><strong>9:</strong></a> The property is applied but in an inconsistent way between browsers on Mac OSX.</p>
<p><a name="note-10"><strong>10:</strong></a> the property is well applied on the {{HTMLElement("select")}} element but is inconsistently handled on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} element.</p>
<p><a name="note-11"><strong>11:</strong></a> Opera does not support {{cssxref("padding-top")}} and {{cssxref("padding-bottom")}} on the {{HTMLElement("select")}} element.</p>
<p><a name="note-12"><strong>12:</strong></a> Opera on Mac OSX handle this like a select widget with the same restriction.</p>
<p><a name="note-13"><strong>13:</strong></a> Chrome hide the {{HTMLElement("progress")}} and {{HTMLElement("meter")}} element when the {{cssxref("padding")}} property is applied on a tweaked element.</p>
<p><a name="note-14"><strong>14:</strong></a> 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>
<p><a name="note-15"><strong>15:</strong></a> Chrome and Opera add some extra space around the widget and Opera on Windows 7 stretch the range grip.</p>
<p><a name="note-16"><strong>16:</strong></a> The {{cssxref("padding")}} is applied but has no visual effect.</p>
<p><a name="note-17"><strong>17:</strong></a> If the {{cssxref("border-color")}} property is not set, WebKit based browser will apply the {{cssxref("color")}} property to the border as well as the font on {{HTMLElement("textarea")}}s.</p>
<p><a name="note-18"><strong>18:</strong></a> the {{cssxref("line-height")}} property is support really inconsistantly across browsers, you should avoid it.</p>
<p><a name="note-19"><strong>19:</strong></a> This property is not supported by Opera on form widgets.</p>
<p><a name="note-20"><strong>20:</strong></a> IE9 support this property only on {{HTMLElement("textarea")}}s where Opera only support it on single line text fields.</p>
<p><a name="note-21"><strong>21:</strong></a> Opera, Safari and IE9 does not support {{cssxref("text-overflow")}} on form widgets.</p>
<p><a name="note-22"><strong>22:</strong></a> Opera does not support {{cssxref("text-shadow")}} on form widgets and IE9 does not support it at all.</p>
<p><a name="note-23"><strong>23:</strong></a> On Mac OSX, WebKit based browser do not support this property on native widgets and they does not support it at all, as well as Opera, on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</p>
<p><a name="note-24"><strong>24:</strong></a> IE9 does not support this property on {{HTMLElement("select")}}, {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements; WebKit based browser on Mac OSX do not support this property on {{HTMLElement("option")}} and {{HTMLElement("optgroup")}} elements.</p>
<p><a name="note-25"><strong>25:</strong></a> IE9 on Windows 7 and WebKit based browser On Mac OSX do not support this property on this widget.</p>
<p><a name="note-26"><strong>26:</strong></a> Only Firefox provide a full support for this property. Opera does not support it at all and other browsers only support it on the {{HTMLElement("select")}} element.</p>
<p><a name="note-27"><strong>27:</strong></a> Only support by Firefox and IE9.</p>
<p><a name="note-28"><strong>28:</strong></a> Most of the browsers only support this property on the {{HTMLElement("select")}} element</p>
<p><a name="note-29"><strong>29:</strong></a> IE9 does not support this property.</p>
<p><a name="note-30"><strong>30:</strong></a> Supported but there is to much inconstency between browsers to be reliable.</p>
<p><a name="note-31"><strong>31:</strong></a> Many browsers also apply the property to the select button.</p>
<p><a name="note-32"><strong>32:</strong></a> It acts more or less like an extra left margin outside the widget.</p>
<p><a name="note-33"><strong>33:</strong></a> On Opera the {{cssxref("border-radius")}} property is apply only if an explicit border is set.</p>
Revert to this revision