Advanced styling for HTML forms

  • Revision slug: Advanced_styling_for_HTML_forms
  • Revision title: Advanced styling for HTML forms
  • Revision id: 328971
  • Created:
  • Creator: Jeremie
  • Is current revision? No
  • Comment

Revision Content

In this article, we will see how to use CSS with HTML forms to style some form widgets that are difficult to customize. As we saw in the previous article, text fields and buttons are perfectly okay with CSS. Now we will dig into the dark part of HTML form styling.

Before going further, let's recall two kinds of HTML form widgets:

The bad
Elements that can hardly be styled and require some complicated tricks, sometimes involving advanced CSS3 knowledge.
The ugly
Just forget CSS to style these elements. At best you'll be able to do a few things but it will not be reliable across browsers, and it will never be possible to take full control over their appearance.

CSS expressiveness

The main problem with form widgets other than text fields and buttons is that in many cases, CSS is not expressive enough to properly style complex widgets.

The recent evolution of HTML and CSS have extended CSS expressiveness:

  • CSS 2.1 was very limited and gave us only three pseudo-classes:
    • {{cssxref(":active")}}
    • {{cssxref(":focus")}}
    • {{cssxref(":hover")}}
  • CSS Selector Level 3 added a few new pseudo-classes related to HTML forms:
    • {{cssxref(":enabled")}}
    • {{cssxref(":disabled")}}
    • {{cssxref(":checked")}}
    • {{cssxref(":indeterminate")}}
  • CSS Basic UI Level 3 also adds a few pseudo-classes to describe the state of a widget:
    • {{cssxref(":default")}}
    • {{cssxref(":valid")}}
    • {{cssxref(":invalid")}}
    • {{cssxref(":in-range")}}
    • {{cssxref(":out-of-range")}}
    • {{cssxref(":required")}}
    • {{cssxref(":optional")}}
    • {{cssxref(":read-only")}}
    • {{cssxref(":read-write")}}
  • CSS Selector Level 4 which is currently under active development and heavy discussion doesn't plan to add much more to improve forms:
    • {{cssxref(":user-error")}} which is just an improvement of the {{cssxref(":invalid")}} pseudo-class.

All of this is a good start but there are two issues with this: first, some browsers do not necessarily implement features beyond CSS 2.1. Second, these are simply not good enough for styling complex widgets such as date pickers.

There are some experiments by browser vendors to extend CSS expressiveness about forms and in some cases it's good to know what's available.

Warning: Even thought these experiments are interesting, they're not standard, which means it's not reliable. If you use them (and you probably often shouldn't), you do so at your own risk and you're doing something that may be bad for the Web by using non-standard properties.

Controlling the appearance of form elements

WebKit (Chrome, Safari) and Gecko (Firefox) based browsers offer the highest degree of customization for HTML widgets. There are also available cross-platform so they need a mechanism to switch from widgets with native look and feel to widgets that are stylable by the user.

To that end, they use a proprietary property: {{cssxref("-webkit-appearance")}} or {{cssxref("-moz-appearance")}}. Those properties are not standard and should not be used. In fact, they even behave differently between WebKit and Gecko. However, there is one value that is good to know: none. With this value, you are able to gain (almost full) control over the style of a given widgets.

So, if you have trouble applying a style to an element, try using those proprietary properties. We'll see some examples below, but the best known use case for this property is for styling search fields on WebKit browsers:

<form>
    <input type="search">
</form>
<style>
input[type=search] {
    border: 1px dotted #999;
    border-radius: 0;
    
    -webkit-appearance: none;
}
</style>

Note: It's always hard to predict the future when we talk about Web technologies, but extending CSS expressiveness is difficult and there is some exploratory work with other specifications such as Shadow DOM that offer some perspective. The quest for the fully stylable form is far from over.

Examples

Check boxes and radio buttons

Styling a check box or a radio button by itself is kind of messy. For example, the sizes of check boxes and radio buttons are not really meant to be changed, and browsers can react very differently if you try to do it.

A simple test case

Let's consider the following test case:

<span><input type="checkbox"></span>
span {
    display: inline-block;
    background: red;
}

input[type=checkbox] {
    width : 100px;
    height: 100px;
}

Here is the way different browsers handle this:

Browser Rendering
Firefox 16 (Mac OSX) Rendering of a sized check box on Firefox
Chrome 22 (Mac OSX) Rendering of a sized check box on Chrome
Opera 12.01 (Mac OSX) Rendering of a sized check box on Opera
Internet Explorer 9 (Windows 7) Rendering of a sized check box on IE9
Internet Explorer 7 (Windows XP) Rendering of a sized check box on IE7

A more complex example

Because Opera and Internet Explorer do not have features such as {{cssxref("-webkit-appearance")}} or {{cssxref("-moz-appearance")}}, using them is not suitable. Fortunately, we are in a case where CSS is expressive enough to find solutions. Let's take a common example:

<form>
  <fieldset>
    <p>
      <input type="checkbox" id="first" name="fruit-1" value="cherry">
      <label for="first">I like cherry</label>
    </p>
    <p>
      <input type="checkbox" id="second" name="fruit-2" value="banana" disabled>
      <label for="second">I can't like banana</label>
    </p>
    <p>
      <input type="checkbox" id="third" name="fruit-3" value="strawberry">
      <label for="third">I like strawberry</label>
    </p>
  </fieldset>
</form>

with a few basic styling:

body {
  font: 1em sans-serif;
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;

  padding: 0;
  margin : 0;
}

fieldset {
  border : 1px solid #CCC;
  border-radius: 5px;
  margin : 0;
  padding: 1em;
}

label {
  cursor : pointer;
}

p {
  margin : 0;
}

p+p {
  margin : .5em 0;
}

Now, let's style this to have a custom check box.

The plan is to replace the native checkbox with an image of our own. So, first, we need prepare an image with all the states required by a check box. Those states are: unchecked, checked, disabled unchecked, and disabled checked. This image will be used as a CSS sprite:

Check box CSS Sprite

Let's start by hiding the original check boxes. We will simply move them outside the page viewport. There are two important things to consider here:

  • Do not use display:none to hide the check box because as we'll see below, we need the check box to be available to the user. With display:none, the check box is no longer accessible to the user which means that it's impossible to check or uncheck it.
  • We will use some CSS3 selectors to perform our styling. In order to support legacy browsers, we can prefix all our selectors with the {{cssxref(":root")}} pseudo-class. In the current state of implementation, all browsers that support what we need also support the {{cssxref(":root")}} pseudo-class, while others don't. This is an example of a convenient way to filter legacy Internet Explorer. Those browsers will see the regular check box while modern browsers will see the custom check box.
:root input[type=checkbox] {
  /* original check box are push outside the viexport */
  position: absolute;
  left: -1000em;
}

Now that we've gotten rid of the native check box, let's add our own. To that end, we will use the {{cssxref(":before")}} pseudo element of the {{HTMLElement("label")}} element that follows the original check box. So in the following selector, we use the attribute selector to target the check box; then we use the adjacent sibling selector to target the label following the original check box. Finally, we access the {{cssxref(":before")}} pseudo-element and style it to have it display our custom unchecked check box.

:root input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;

/* The following is used to adjust the position of 
   the check boxes on the text baseline */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}

We use the {{cssxref(":checked")}} and {{cssxref(":disabled")}} pseudo-classes on the original check box to change the state of our custom check box accordingly. Because we use a CSS sprite, all we need to do is change the position of the background.

:root input[type=checkbox]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type=checkbox]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type=checkbox]:checked:disabled + label:before {
  background-position: 0 -48px;
}

The last (but very important) thing: when a user uses the keyboard to navigate from one form widget to another, each widget should be focused visually. Because we hide the native check boxes, we have to implement this feature ourselves to let the user know where he is in the form. The following CSS implements the focusing of our custom checkboxes.

:root input[type=checkbox]:focus + label:before {
  outline: 1px dotted black;
}

You can see the live result:

{{EmbedLiveSample("A_more_complex_example", 250, 175)}}

Dealing with the select nightmare

The {{HTMLElement("select")}} element is considered an "ugly" widget because it's impossible to style it consistently cross platform; however, some things are possible. Rather than a long explanation, let's take an example:

<select>
  <option>Cherry</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
select {
  width   : 80px;
  padding : 10px;
}

option {
  padding : 5px;
  color   : red;
}

The following table shows how different browsers handle this in two cases. The first two columns are just the example alone. The second two columns use some custom CSS to gain more control on the widget's appearance, as shown below:

select, option {
  -webkit-appearance : none; /* To gain control over the appearance on WebKit */
  -moz-appearance : none; /* To gain control over the appearance on Gecko */

  /* To gain control over the appearance on Presto (Opera) and Trident (IE)
     Note that it also work on Gecko and has partial effects on WebKit */  
  background : none;
}
Browser Regular rendering Tweaked rendering
closed open closed open
Firefox 16 (Mac OSX) Select closed on Firefox on Mac OSX (No tweak) Select open on Firefox on Mac OSX (No tweak) Select closed on Firefox on Mac OSX Select open on Firefox on Mac OSX
Firefox 16 (Windows 7) Select closed on Firefox on Windows 7 (No tweak) Select open on Firefox on Windows 7 (No tweak) Select closed on Firefox on Windows 7 Select open on Firefox on Windows 7
Chrome 22 (Mac OSX) Select closed on Chrome on Mac OSX (No tweak) Select open on Chrome on Mac OSX (No tweak) Select closed on Chrome on Mac OSX Select open on Chrome on Mac OSX
Chrome 22 (Windows 7) Select closed on Chrome on Windows 7 (No tweak) Select open on Chrome on Windows 7 (No tweak) Select closed on Chrome on Windows 7 Select open on Chrome on Windows 7
Opera 12.01 (Mac OSX) Select closed on Opera on Mac OSX (No tweak) Select open on Opera on Mac OSX (No tweak) Select closed on Opera on Mac OSX Select open on Opera on Mac OSX
Internet Explorer 9 (Windows 7) Select closed on IE9 on Windows 7 Select open on IE9 on Windows 7 N/A N/A
Internet Explorer 7 (Windows XP) Select closed on IE7 on Windows XP Select open on IE7 on Windows XP N/A N/A

As you can see, even with the help of the -*-appearance properties, there are still remaining issues:

  • The {{cssxref("padding")}} property is handled inconsistently across operating systems and browsers.
  • Legacy Internet Explorer does not allow smooth styling.
  • Firefox does not have a way to style the dropdown arrow.
  • If you want to style the {{HTMLElement("option")}} elements inside the dropdown list, the behavior of Chrome and Opera vary from one system to another.

Also, with our example, we are just talking about three CSS properties; imagine the mess when even more CSS properties are considered. As you can see, CSS is not suitable for changing the look and feel of these widgets consistently, but it still lets you tweak some things as long as you're willing to live with differences from one browser and one operating system to another.

We will try to figure which properties are suitable in the next article: Properties compatibility table for form widgets.

The road to nicer forms: useful libraries and polyfills

Although CSS is expressive enough for check boxes and radio button, it is far from true for more advanced widgets. Even though a few things are possible with the {{HTMLElement("select")}} element, the file widget cannot be styled at all; the same goes for the date picker, etc.

If you want to gain full control over form widgets, you have no choice but to rely on JavaScript. In the article How to build custom form widgets we will see how to do it on our own, but there are some very useful libraries out there that can help you:

  • Uni-form is a framework that standardizes form markup and styles it with CSS. It also offers a few additional features when used in concert with jQuery, but it that's optional.
  • Fromalize is an extension to common JavaScript frameworks (such as jQuery, Dojo, YUI, etc.) that helps to normalize and customize your forms.
  • Niceforms is a standalone JavaScript method that provides complete customization of web forms. You can use some of the built in themes or create your own.

The following libraries aren't just about forms, but they have very interesting features for dealing with HTML forms:

  • jQuery UI offers some very interesting advanced and customizable widgets, such as date pickers (with special attention given to accessibility).
  • Twitter Bootstrap can be really helpful if you want to normalize your forms.
  • WebShim is a huge tool that can help you deal with browser HTML5 support. The web forms part can be really helpful.

Remember that binding CSS and JavaScript can have side effects. So if you choose to use one of those libraries, you should always have fallback style sheets in case the script fails. There are many reasons why scripts may fail, especially in the mobile world, and you need to design your Web site or app to handle these cases as best as possible.

Conclusion

While there are still dark spots when using CSS with HTML forms, there are often ways to get around them. There are no clean, universal solutions; however, modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS as applied to HTML form widgets. 

In the next article of this guide, we will explore how well the various HTML form widgets support the most important CSS properties: Properties compatibility table for form widgets.

See also

Revision Source

<p>In this article, we will see how to use <a href="https://developer.mozilla.org/en-US/docs/CSS" title="/en-US/docs/CSS">CSS</a> with <a href="https://developer.mozilla.org/en-US/docs/HTML" title="/en-US/docs/HTML">HTML</a> forms to style some form widgets that are difficult to customize. As we saw <a href="/en-US/docs/HTML/Forms/Styling_HTML_forms" title="/en-US/docs/HTML/Forms/Styling_HTML_forms">in the previous article</a>, text fields and buttons are perfectly okay with CSS. Now we will dig into the dark part of HTML form styling.</p>
<p>Before going further, let's recall two kinds of HTML form widgets:</p>
<dl>
  <dt>
    The bad</dt>
  <dd>
    Elements that can hardly be styled and require some complicated tricks, sometimes involving advanced CSS3 knowledge.</dd>
  <dt>
    The ugly</dt>
  <dd>
    Just forget CSS to style these elements. At best you'll be able to do a few things but it will not be reliable across browsers, and it will never be possible to take full control over their appearance.</dd>
</dl>
<h2 id="CSS_expressiveness">CSS expressiveness</h2>
<p>The main problem with form widgets other than text fields and buttons is that in many cases, CSS is not expressive enough to properly style complex widgets.</p>
<p>The recent evolution of HTML and CSS have extended CSS expressiveness:</p>
<ul>
  <li><a href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" rel="external" title="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes">CSS 2.1</a> was very limited and gave us only three pseudo-classes:
    <ul>
      <li>{{cssxref(":active")}}</li>
      <li>{{cssxref(":focus")}}</li>
      <li>{{cssxref(":hover")}}</li>
    </ul>
  </li>
  <li><a href="http://www.w3.org/TR/css3-selectors/" rel="external" title="http://www.w3.org/TR/css3-selectors/">CSS Selector Level 3</a> added a few new pseudo-classes related to HTML forms:
    <ul>
      <li>{{cssxref(":enabled")}}</li>
      <li>{{cssxref(":disabled")}}</li>
      <li>{{cssxref(":checked")}}</li>
      <li>{{cssxref(":indeterminate")}}</li>
    </ul>
  </li>
  <li><a href="http://dev.w3.org/csswg/css3-ui/#pseudo-classes" rel="external" title="http://dev.w3.org/csswg/css3-ui/#pseudo-classes">CSS Basic UI Level 3</a> also adds a few pseudo-classes to describe the state of a widget:
    <ul>
      <li>{{cssxref(":default")}}</li>
      <li>{{cssxref(":valid")}}</li>
      <li>{{cssxref(":invalid")}}</li>
      <li>{{cssxref(":in-range")}}</li>
      <li>{{cssxref(":out-of-range")}}</li>
      <li>{{cssxref(":required")}}</li>
      <li>{{cssxref(":optional")}}</li>
      <li>{{cssxref(":read-only")}}</li>
      <li>{{cssxref(":read-write")}}</li>
    </ul>
  </li>
  <li><a href="http://dev.w3.org/csswg/selectors4/" rel="external" title="http://dev.w3.org/csswg/selectors4/">CSS Selector Level 4</a> which is currently under active development and heavy discussion doesn't plan to add much more to improve forms:
    <ul>
      <li>{{cssxref(":user-error")}} which is just an improvement of the {{cssxref(":invalid")}} pseudo-class.</li>
    </ul>
  </li>
</ul>
<p>All of this is a good start but there are two issues with this: first, some browsers do not necessarily implement features beyond CSS 2.1. Second, these are simply not good enough for styling complex widgets such as date pickers.</p>
<p>There are some experiments by browser vendors to extend CSS expressiveness about forms and in some cases it's good to know what's available.</p>
<div class="warning">
  <p><strong>Warning:</strong> Even thought these experiments are interesting, <strong>they're not standard, which means it's not reliable</strong>. If you use them (and you probably often shouldn't), you do so at your own risk and <a href="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/" title="http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies/">you're doing something that may be bad for the Web</a> by using non-standard properties.</p>
</div>
<ul>
  <li><a href="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions" title="/en-US/docs/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a>
    <ul>
      <li>{{cssxref(":-moz-placeholder")}}</li>
      <li>{{cssxref(":-moz-submit-invalid")}}</li>
      <li>{{cssxref(":-moz-ui-invalid")}}</li>
      <li>{{cssxref(":-moz-ui-valid")}}</li>
    </ul>
  </li>
  <li><a href="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions" title="/en-US/docs/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a>
    <ul>
      <li>{{cssxref("::-webkit-input-placeholder")}}</li>
      <li><a href="http://trac.webkit.org/wiki/Styling%20Form%20Controls" rel="external" title="http://trac.webkit.org/wiki/Styling Form Controls">And many more</a></li>
    </ul>
  </li>
  <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh869403%28v=vs.85%29.aspx">Microsoft CSS Extensions</a>
    <ul>
      <li><a href="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx" rel="external" title="http://msdn.microsoft.com/en-us/library/ie/hh772745%28v=vs.85%29.aspx">:-ms-input-placeholder</a></li>
    </ul>
  </li>
  <li><a href="http://www.opera.com/docs/specs/" rel="external" title="http://www.opera.com/docs/specs/">Opera has no extensions related to HTML forms</a></li>
</ul>
<h3 id="Controlling_the_appearance_of_form_elements">Controlling the appearance of form elements</h3>
<p>WebKit (Chrome, Safari) and Gecko (Firefox) based browsers offer the highest degree of customization for HTML widgets. There are also available cross-platform so they need a mechanism to switch from widgets with native look and feel to widgets that are stylable by the user.</p>
<p>To that end, they use a proprietary property: {{cssxref("-webkit-appearance")}} or {{cssxref("-moz-appearance")}}. <strong>Those properties are not standard and should not be used</strong>. In fact, they even behave differently between WebKit and Gecko. However, there is one value that is good to know: <code>none</code>. With this value, you are able to gain (almost full) control over the style of a given widgets.</p>
<p>So, if you have trouble applying a style to an element, try using those proprietary properties. We'll see some examples below, but the best known use case for this property is for styling search fields on WebKit browsers:</p>
<pre class="brush: html">
&lt;form&gt;
    &lt;input type="search"&gt;
&lt;/form&gt;</pre>
<pre class="brush: css">
&lt;style&gt;
input[type=search] {
    border: 1px dotted #999;
    border-radius: 0;
    
    -webkit-appearance: none;
}
&lt;/style&gt;</pre>
<div class="note">
  <p><strong>Note:</strong> It's always hard to predict the future when we talk about Web technologies, but extending CSS expressiveness is difficult and there is some exploratory work with other specifications such as <a href="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html" rel="external" title="http://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/shadow/index.html">Shadow DOM</a> that offer some perspective. The quest for the fully stylable form is far from over.</p>
</div>
<h2 id="Examples">Examples</h2>
<h3 id="Check_boxes_and_radio_buttons">Check boxes and radio buttons</h3>
<p>Styling a check box or a radio button by itself is kind of messy. For example, the sizes of check boxes and radio buttons are not really meant to be changed, and browsers can react very differently if you try to do it.</p>
<h4 id="A_simple_test_case">A simple test case</h4>
<p>Let's consider the following test case:</p>
<pre class="brush: html">
&lt;span&gt;&lt;input type="checkbox"&gt;&lt;/span&gt;</pre>
<pre class="brush: css">
span {
    display: inline-block;
    background: red;
}

input[type=checkbox] {
    width : 100px;
    height: 100px;
}</pre>
<p>Here is the way different browsers handle this:</p>
<table>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Rendering</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Firefox 16 (Mac OSX)</td>
      <td><img alt="Rendering of a sized check box on Firefox" src="/files/4165/checkbox-firefox-macos.png" style="width: 107px; height: 106px;" /></td>
    </tr>
    <tr>
      <td>Chrome 22 (Mac OSX)</td>
      <td><img alt="Rendering of a sized check box on Chrome" src="/files/4163/checkbox-chrome-macos.png" style="width: 106px; height: 106px;" /></td>
    </tr>
    <tr>
      <td>Opera 12.01 (Mac OSX)</td>
      <td><img alt="Rendering of a sized check box on Opera" src="/files/4167/checkbox-opera-macos.png" style="width: 107px; height: 106px;" /></td>
    </tr>
    <tr>
      <td>Internet Explorer 9 (Windows 7)</td>
      <td><img alt="Rendering of a sized check box on IE9" src="/files/4169/checkbox-IE9-win7.png" style="width: 106px; height: 107px;" /></td>
    </tr>
    <tr>
      <td>Internet Explorer 7 (Windows XP)</td>
      <td><img alt="Rendering of a sized check box on IE7" src="/files/4171/checkbox-IE7-winxp.png" style="width: 100px; height: 100px;" /></td>
    </tr>
  </tbody>
</table>
<h4 id="A_more_complex_example">A more complex example</h4>
<p>Because Opera and Internet Explorer do not have features such as {{cssxref("-webkit-appearance")}} or {{cssxref("-moz-appearance")}}, using them is not suitable. Fortunately, we are in a case where CSS is expressive enough to find solutions. Let's take a common example:</p>
<pre class="brush: html">
&lt;form&gt;
  &lt;fieldset&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="first" name="fruit-1" value="cherry"&gt;
      &lt;label for="first"&gt;I like cherry&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="second" name="fruit-2" value="banana" disabled&gt;
      &lt;label for="second"&gt;I can't like banana&lt;/label&gt;
    &lt;/p&gt;
    &lt;p&gt;
      &lt;input type="checkbox" id="third" name="fruit-3" value="strawberry"&gt;
      &lt;label for="third"&gt;I like strawberry&lt;/label&gt;
    &lt;/p&gt;
  &lt;/fieldset&gt;
&lt;/form&gt;</pre>
<p>with a few basic styling:</p>
<pre class="brush: css">
body {
  font: 1em sans-serif;
  text-align: center;
}

form {
  display: inline-block;
  text-align: left;

  padding: 0;
  margin : 0;
}

fieldset {
  border : 1px solid #CCC;
  border-radius: 5px;
  margin : 0;
  padding: 1em;
}

label {
  cursor : pointer;
}

p {
  margin : 0;
}

p+p {
  margin : .5em 0;
}</pre>
<p>Now, let's style this to have a custom check box.</p>
<p>The plan is to replace the native checkbox with an image of our own. So, first, we need prepare an image with all the states required by a check box. Those states are: unchecked, checked, disabled unchecked, and disabled checked. This image will be used as a CSS sprite:</p>
<p><img alt="Check box CSS Sprite" src="/files/4173/checkbox-sprite.png" style="width: 16px; height: 64px;" /></p>
<p>Let's start by hiding the original check boxes. We will simply move them outside the page viewport. There are two important things to consider here:</p>
<ul>
  <li>Do not use <code>display:none</code> to hide the check box because as we'll see below, we need the check box to be available to the user. With <code>display:none</code>, the check box is no longer accessible to the user which means that it's impossible to check or uncheck it.</li>
  <li>We will use some CSS3 selectors to perform our styling. In order to support legacy browsers, we can prefix all our selectors with the {{cssxref(":root")}} pseudo-class. In the current state of implementation, all browsers that support what we need also support the {{cssxref(":root")}} pseudo-class, while others don't. This is an example of a convenient way to filter legacy Internet Explorer. Those browsers will see the regular check box while modern browsers will see the custom check box.</li>
</ul>
<pre class="brush: css">
:root input[type=checkbox] {
  /* original check box are push outside the viexport */
  position: absolute;
  left: -1000em;
}</pre>
<p>Now that we've gotten rid of the native check box, let's add our own. To that end, we will use the {{cssxref(":before")}} pseudo element of the {{HTMLElement("label")}} element that follows the original check box. So in the following selector, we use the <a href="/en-US/docs/CSS/Attribute_selectors" title="/en-US/docs/CSS/Attribute_selectors">attribute selector</a> to target the check box; then we use the <a href="/en-US/docs/CSS/Adjacent_sibling_selectors" title="/en-US/docs/CSS/Adjacent_sibling_selectors">adjacent sibling selector</a> to target the <code>label</code> following the original check box. Finally, we access the {{cssxref(":before")}} pseudo-element and style it to have it display our custom unchecked check box.</p>
<pre class="brush: css">
:root input[type=checkbox] + label:before {
  content: "";
  display: inline-block;
  width  : 16px;
  height : 16px;
  margin : 0 .5em 0 0;
  background: url("https://developer.mozilla.org/files/4173/checkbox-sprite.png") no-repeat 0 0;

/* The following is used to adjust the position of 
   the check boxes on the text baseline */

  vertical-align: bottom;
  position: relative;
  bottom: 2px;
}</pre>
<p>We use the {{cssxref(":checked")}} and {{cssxref(":disabled")}} pseudo-classes on the original check box to change the state of our custom check box accordingly. Because we use a CSS sprite, all we need to do is change the position of the background.</p>
<pre class="brush: css">
:root input[type=checkbox]:checked + label:before {
  background-position: 0 -16px;
}

:root input[type=checkbox]:disabled + label:before {
  background-position: 0 -32px;
}

:root input[type=checkbox]:checked:disabled + label:before {
  background-position: 0 -48px;
}</pre>
<p>The last (but very important) thing: when a user uses the keyboard to navigate from one form widget to another, each widget should be focused visually. Because we hide the native check boxes, we have to implement this feature ourselves to let the user know where he is in the form. The following CSS implements the focusing of our custom checkboxes.</p>
<pre class="brush: css">
:root input[type=checkbox]:focus + label:before {
  outline: 1px dotted black;
}</pre>
<p>You can see the live result:</p>
<p>{{EmbedLiveSample("A_more_complex_example", 250, 175)}}</p>
<h3 id="Dealing_with_the_select_nightmare">Dealing with the select nightmare</h3>
<p>The {{HTMLElement("select")}} element is considered an "ugly" widget because it's impossible to style it consistently cross platform; however, some things are possible. Rather than a long explanation, let's take an example:</p>
<pre class="brush: html">
&lt;select&gt;
  &lt;option&gt;Cherry&lt;/option&gt;
  &lt;option&gt;Banana&lt;/option&gt;
  &lt;option&gt;Strawberry&lt;/option&gt;
&lt;/select&gt;</pre>
<pre class="brush: css">
select {
  width   : 80px;
  padding : 10px;
}

option {
  padding : 5px;
  color   : red;
}</pre>
<p>The following table shows how different browsers handle this in two cases. The first two columns are just the example alone. The second two columns use some custom CSS to gain more control on the widget's appearance, as shown below:</p>
<pre class="brush: css">
select, option {
  -webkit-appearance : none; /* To gain control over the appearance on WebKit */
  -moz-appearance : none; /* To gain control over the appearance on Gecko */

  /* To gain control over the appearance on Presto (Opera) and Trident (IE)
     Note that it also work on Gecko and has partial effects on WebKit */  
  background : none;
}</pre>
<table class="standard-table">
  <thead>
    <tr>
      <th colspan="1" rowspan="2" scope="col">Browser</th>
      <th colspan="2" scope="col" style="text-align: center;">Regular rendering</th>
      <th colspan="2" scope="col" style="text-align: center;">Tweaked rendering</th>
    </tr>
    <tr>
      <th scope="col" style="text-align: center;">closed</th>
      <th scope="col" style="text-align: center;">open</th>
      <th scope="col" style="text-align: center;">closed</th>
      <th scope="col" style="text-align: center;">open</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Firefox 16 (Mac OSX)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX (No tweak)" src="/files/4201/select-firefox-macos.png" style="width: 82px; height: 52px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX (No tweak)" src="/files/4199/select-firefox-macos-open.png" style="width: 105px; height: 143px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Mac OSX" src="/files/4197/select-firefox-macos-custom.png" style="width: 82px; height: 52px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Mac OSX" src="/files/4195/select-firefox-macos-custom-open.png" style="width: 108px; height: 141px;" /></td>
    </tr>
    <tr>
      <td>Firefox 16 (Windows 7)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7 (No tweak)" src="/files/4209/select-firefox-win7.png" style="width: 82px; height: 50px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7 (No tweak)" src="/files/4207/select-firefox-win7-open.png" style="width: 96px; height: 130px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Firefox on Windows 7" src="/files/4205/select-firefox-win7-custom.png" style="width: 82px; height: 54px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Firefox on Windows 7" src="/files/4203/select-firefox-win7-custom-open.png" style="width: 96px; height: 134px;" /></td>
    </tr>
    <tr>
      <td>Chrome 22 (Mac OSX)</td>
      <td style="vertical-align: top; text-align: center;"><img alt="Select closed on Chrome on Mac OSX (No tweak)" src="/files/4183/select-chrome-macos.png" style="width: 84px; height: 21px; vertical-align: top;" /></td>
      <td style="vertical-align: top; text-align: center;"><img alt="Select open on Chrome on Mac OSX (No tweak)" src="/files/4181/select-chrome-macos-open.png" style="width: 121px; height: 81px; vertical-align: top;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Mac OSX" src="/files/4179/select-chrome-macos-custom.png" style="width: 82px; height: 37px; vertical-align: top;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Mac OSX" src="/files/4177/select-chrome-macos-custom-open.png" style="width: 125px; height: 86px; vertical-align: top;" /></td>
    </tr>
    <tr>
      <td>Chrome 22 (Windows 7)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7 (No tweak)" src="/files/4191/select-chrome-win7.png" style="width: 82px; height: 42px; vertical-align: top;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7 (No tweak)" src="/files/4189/select-chrome-win7-open.png" style="width: 84px; height: 93px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Chrome on Windows 7" src="/files/4187/select-chrome-win7-custom.png" style="width: 82px; height: 42px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Chrome on Windows 7" src="/files/4185/select-chrome-win7-custom-open.png" style="width: 95px; height: 93px;" /></td>
    </tr>
    <tr>
      <td>Opera 12.01 (Mac OSX)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX (No tweak)" src="/files/4225/select-opera-macos.png" style="width: 81px; height: 42px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX (No tweak)" src="/files/4223/select-opera-macos-open.png" style="width: 135px; height: 94px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on Opera on Mac OSX" src="/files/4221/select-opera-macos-custom.png" style="width: 81px; height: 39px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on Opera on Mac OSX" src="/files/4219/select-opera-macos-custom-open.png" style="width: 130px; height: 90px;" /></td>
    </tr>
    <tr>
      <td>Internet Explorer 9 (Windows 7)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE9 on Windows 7" src="/files/4217/select-IE9-win7.png" style="width: 82px; height: 41px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE9 on Windows 7" src="/files/4215/select-IE9-win7-open.png" style="width: 100px; height: 78px;" /></td>
      <td style="text-align: center; vertical-align: middle;">N/A</td>
      <td style="text-align: center; vertical-align: middle;">N/A</td>
    </tr>
    <tr>
      <td>Internet Explorer 7 (Windows XP)</td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select closed on IE7 on Windows XP" src="/files/4213/select-IE7-winxp.png" style="width: 81px; height: 23px;" /></td>
      <td style="text-align: center; vertical-align: top;"><img alt="Select open on IE7 on Windows XP" src="/files/4211/select-IE7-winxp-open.png" style="width: 82px; height: 74px;" /></td>
      <td style="text-align: center; vertical-align: middle;">N/A</td>
      <td style="text-align: center; vertical-align: middle;">N/A</td>
    </tr>
  </tbody>
</table>
<p>As you can see, even with the help of the <code>-*-appearance</code> properties, there are still remaining issues:</p>
<ul>
  <li>The {{cssxref("padding")}} property is handled inconsistently across operating systems and browsers.</li>
  <li>Legacy Internet Explorer does not allow smooth styling.</li>
  <li>Firefox does not have a way to style the dropdown arrow.</li>
  <li>If you want to style the {{HTMLElement("option")}} elements inside the dropdown list, the behavior of Chrome and Opera vary from one system to another.</li>
</ul>
<p>Also, with our example, we are just talking about three CSS properties; imagine the mess when even more CSS properties are considered. As you can see, CSS is not suitable for changing the look and feel of these widgets consistently, but it still lets you tweak some things as long as you're willing to live with differences from one browser and one operating system to another.</p>
<p>We will try to figure which properties are suitable in the next article: <a class="new" href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Properties compatibility table for form widgets</a>.</p>
<h2 id="The_road_to_nicer_forms.3A_useful_libraries_and_polyfills">The road to nicer forms: useful libraries and polyfills</h2>
<p>Although CSS is expressive enough for check boxes and radio button, it is far from true for more advanced widgets. Even though a few things are possible with the {{HTMLElement("select")}} element, the file widget cannot be styled at all; the same goes for the date picker, etc.</p>
<p>If you want to gain full control over form widgets, you have no choice but to rely on JavaScript. In the article <a href="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets" title="/en-US/docs/HTML/Forms/How_to_build_custom_form_widgets">How to build custom form widgets</a> we will see how to do it on our own, but there are some very useful libraries out there that can help you:</p>
<ul>
  <li><a href="http://sprawsm.com/uni-form/" rel="external" title="http://sprawsm.com/uni-form/">Uni-form</a> is a framework that standardizes form markup and styles it with CSS. It also offers a few additional features when used in concert with jQuery, but it that's optional.</li>
  <li><a href="http://formalize.me/" rel="external" title="http://formalize.me/">Fromalize</a> is an extension to common JavaScript frameworks (such as jQuery, Dojo, YUI, etc.) that helps to normalize and customize your forms.</li>
  <li><a href="http://www.emblematiq.com/lab/niceforms/" rel="external" title="http://www.emblematiq.com/lab/niceforms/">Niceforms</a> is a standalone JavaScript method that provides complete customization of web forms. You can use some of the built in themes or create your own.</li>
</ul>
<p>The following libraries aren't just about forms, but they have very interesting features for dealing with HTML forms:</p>
<ul>
  <li><a href="http://jqueryui.com/" rel="external" title="http://jqueryui.com/">jQuery UI</a> offers some very interesting advanced and customizable widgets, such as date pickers (with special attention given to accessibility).</li>
  <li><a href="http://twitter.github.com/bootstrap/base-css.html#forms" rel="external" title="http://twitter.github.com/bootstrap/base-css.html#forms">Twitter Bootstrap</a> can be really helpful if you want to normalize your forms.</li>
  <li><a href="http://afarkas.github.com/webshim/demos/demos/webforms.html" rel="external" title="http://afarkas.github.com/webshim/demos/demos/webforms.html">WebShim</a> is a huge tool that can help you deal with browser HTML5 support. The web forms part can be really helpful.</li>
</ul>
<p>Remember that binding CSS and JavaScript can have side effects. So if you choose to use one of those libraries, you should always have fallback style sheets in case the script fails. There are many reasons why scripts may fail, especially in the mobile world, and you need to design your Web site or app to handle these cases as best as possible.</p>
<h2 id="Conclusion">Conclusion</h2>
<p>While there are still dark spots when using CSS with HTML forms, there are often ways to get around them. There are no clean, universal solutions; however, modern browsers offer new possibilities. For now, the best solution is to learn more about the way the different browsers support CSS as applied to HTML form widgets.&nbsp;</p>
<p>In the next article of this guide, we will explore how well the various HTML form widgets support the most important CSS properties: <a class="new" href="/en-US/docs/Property_compatibility_table_for_form_widgets" title="/en-US/docs/Properties_compatibility_table_for_forms_widgets">Properties compatibility table for form widgets</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="http://diveintohtml5.info/forms.html" rel="external" title="http://diveintohtml5.info/forms.html">Dive into HTML5: Forms</a></li>
  <li><a href="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/" rel="external" title="http://www.smashingmagazine.com/2011/06/27/useful-ideas-and-guidelines-for-good-web-form-design/">Useful ideas and guidelines for good web form design</a></li>
</ul>
Revert to this revision