Property compatibility table for form widgets

  • Revision slug: Properties_compatibility_table_for_forms_widgets
  • Revision title: Properties compatibility table for forms widgets
  • Revision id: 326315
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

The following compatibility tables try to summarize the state of the art of CSS support on HTML Forms.

Due to the complexity of CSS and HTML forms, those tables cannot be considered as a perfect reference. It just gives you hints about what will be doable or not and will point out the hard things.

How to read the table

For each cell there are four different possible values:

  1. YES: This mean there is a reasonable consistent support for the property among browsers. However it's still possible you'll face strange side effect on edge cases.
  2. PARTIAL: This mean the property works but you can face strange side effects or inconsistency quite easily. You should not use that property unless you master the existing side effects.
  3. NO: The property just not works or behaves to strangely to be reliable.
  4. N.A.: Non-Applicable, this property as no meaning for this type of widget.

You'll find numbers aside some values; there are links to implementation notes in order to understand some behaviour.

For each column there are two values:

  • The "N" (Normal) value indicate that the property is applied "as is";
  • The "T" (Tweaked) value indicate that the property is applied with the following extra rule:
* {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
}

Compatibility tables

CSS box model

Properties Text fields Buttons Number Check boxes & radio buttons Select Select multiple Datalist File picker Date Pickers Color Picker Meter & progress Range Image
N T N T N T N T N T N T N T N T N T N T N T N T N T
{{cssxref("width")}} Yes Yes                                                
{{cssxref("height")}}                                                    
{{cssxref("border")}}                                                    
{{cssxref("margin")}}                                                    
{{cssxref("padding")}}                                                    

Implementation notes

Revision Source

<p>The following compatibility tables try to summarize the state of the art of CSS support on HTML Forms.</p>
<p>Due to the complexity of CSS and HTML forms, those tables cannot be considered as a perfect reference. It just gives you hints about what will be doable or not and will point out the hard things.</p>
<h2>How to read the table</h2>
<p>For each cell there are four different possible values:</p>
<ol>
  <li>YES: This mean there is a reasonable consistent support for the property among browsers. However it's still possible you'll face strange side effect on edge cases.</li>
  <li>PARTIAL: This mean the property works but you can face strange side effects or inconsistency quite easily. You should not use that property unless you master the existing side effects.</li>
  <li>NO: The property just not works or behaves to strangely to be reliable.</li>
  <li>N.A.: Non-Applicable, this property as no meaning for this type of widget.</li>
</ol>
<p>You'll find numbers aside some values; there are links to implementation notes in order to understand some behaviour.</p>
<p>For each column there are two values:</p>
<ul>
  <li>The "N" (Normal) value indicate that the property is applied "as is";</li>
  <li>The "T" (Tweaked) value indicate that the property is applied with the following extra rule:</li>
</ul>
<pre class="brush: css">
* {
  -webkit-appearance: none;
  -moz-appearance: none;
  background: none;
}</pre>
<h2>Compatibility tables</h2>
<h3>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;">Text fields</th>
      <th colspan="2" scope="col" style="text-align: center;">Buttons</th>
      <th colspan="2" scope="col" style="text-align: center;">Number</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</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</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>
      <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(204, 255, 102);">Yes</td>
      <td style="text-align: center; background-color: rgb(204, 255, 102);">Yes</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("height")}}</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("border")}}</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("margin")}}</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>{{cssxref("padding")}}</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td style="text-align: center;">&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </tbody>
</table>
<h2>Implementation notes</h2>
Revert to this revision