Customizing web forms with CSS3 and WebKit

Last week, we shared a few things we’d learned about UI in mobile WebKit browsers. In that post we touched briefly on the idea of using CSS3 to make form inputs that look and feel the same in all WebKit browsers across platforms. Today I’d like to share some specific examples of how we did that.

Getting started

Customizing form elements in WebKit browsers all starts with applying the -webkit-appearance property to all inputs:

input, textarea, select {
   -webkit-appearance: none;
 }

This removes all of the browser’s default styling from the inputs. You can then apply your own CSS styles.

Base styles

I started by adding some basic styles that would be common to all inputs:

input, textarea, select {
   border: 1px solid #555;
   padding: 0.5em;
   font-size: 15px;
   line-height: 1.2em;
   width: 80%;
   background: #fff;
   background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
   -webkit-appearance: none;
   -webkit-box-shadow: 1px 1px 1px #fff;
   -webkit-border-radius: 0.5em;
 }

That gives us some consistent treatment (and the checkboxes and radios now are visible again), but we’ll need to address some of these specifically.

Getting specific

Using the [type=] attribute selector in our CSS, we can specify styles for each input by kind. For example here are some addtional styles that will be applied to checkboxes and radios:

input[type=checkbox],
 input[type=radio] {
   display: inline-block;
   font-size: 15px;
   line-height: 1em;
   margin: 0 0.25em 0 0;
   padding: 0;
   width: 1.25em;
   height: 1.25em;
   -webkit-border-radius: 0.25em;
   vertical-align: text-top;
 }

 input[type=radio] {
    -webkit-border-radius: 2em; /* Make radios round */
  }

Our checkboxes and radios are now properly sized. Next, we’ll want to specify how the checkboxes will look when checked. The :checked pseudo-class makes it as easy as applying a background image:

input[type=checkbox]:checked {
   background: url("data:image/png,%89PNG[...]") no-repeat center center;
   -webkit-background-size: 28px 28px; /* shrink high resolution background */
 }

The browser applies and removes the checked attribute as the user clicks the widget, allowing us to style our custom checkboxes without any Javascript.

Custom style

After making some additional styles for textareas, submit buttons, and focused fields, our form now looks something like this:

The appearance of our form is clear and the inputs are now consistent across a variety of WebKit browsers including Apple Safari, Google Chrome, and mobile browsers on iOS and Android devices. See the example in your browser.

With some simple modifications, we can completly change the look:

Working example of this alternate look.

Final thoughts

Certainly, changing the appearance of the default form widgets is not something to be taken lightly. Our approach here was a fairly conservative exploration in standardizing on an input style similar to Mobile Safari as a proof of concept. Radically changing UI that people have become accustomed to in their browser should be avoided unless there are substantial benefits to the user. We considered the case that someday 37signals would want to offer mobile versions of all of our apps. Having a standard set of inputs that feel like us, like the desktop apps that so many people are already used to is definitely a benefit. Regardless of your particular stance, it’s exciting that CSS3 finally gives us these powerful options for customization at all.