A Familiar Tale

We've all been there. You are nearly done with a beautiful site design, only to arrive at the task we all dread – form styling. Depending on operating system and browser, default form elements can look okay or horribly disfigured.

Cargo cult adherents say that styling form elements is evil, so we live with browser oddities. It does not have to be this way. It can be much better…

DOWNLOAD | View demo | GitHub repo | Blog post

Compatible with: Chrome, Firefox, Opera, Safari, Internet Explorer (6+)

Comparison

Windows / Mac examples of Google Chrome

Code

<head>
<link rel="stylesheet" href="formalize.css" />
<script src="jquery.js"></script>
<script src="jquery.formalize.js"></script>
</head>

Using Formalize is pretty simple. Just include formalize.css, your JS library of choice, and the *.formalize.js file in the <head>. That's it, easy peasy!

You can also include your JavaScript files right before the closing </body> tag, to improve page rendering performance. Formalize will work either way.

JS Libraries

Logos of JavaScript libraries

While Formalize is primarily a CSS framework, it does rely on a bit of JavaScript to bridge the gap in HTML5 support for older browsers. In order to maximize compatibility, and not make it dependent on one particular library, Formalize supports: Dojo, ExtJS, jQuery, MooTools, Prototype, and YUI.

The Formalize download contains JS files for each library. Simply discard the ones you don't need. Also, compare the various implementations to see the differences and/or similarities of how popular JS libraries operate.


Accolades

Don't take my word for it. Industry experts seem to like Formalize…

Now we have something else to be thankful for. Nathan Smith of SonSpring has created a library that gives designers and developers [control].

Jeffrey Zeldman

A nice lightweight CSS package that makes all of your HTML form elements look cleaner and more consistent across all major browsers.

Mike Davidson

Framework by Nathan Smith for nice looking, HTML5 ready, progressively enhanced, cross-browser forms.

Chris Coyier

Consistent, cross-browser forms. Awesome.

Aaron Gustafson

Example

Note: This is just a demo – It doesn't actually submit anything.