cross browser form styler

Formalize CSS - Teach your forms some manners!

Break the cycle of inconsistent form
defaults, style forms with impunity!
Feel free to ping me on Twitter

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

Code

Using Formalize is pretty simple. Just include formalize.css, your JS library of choice, and the *.formalize.js file in the

. That's it, easy peasy!

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

JS 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.

Name Email CC Send me a copy of this email Phone URL Budget Ballpark estimate... $1,000 to 2,000 $2,000 to 3,000 $3,000 to 4,000 $4,000 to 5,000 $5,000 to 6,000 $6,000 to 7,000 $7,000 to 8,000 $8,000 to 9,000 $9,000 to 10,000 $10,000 to 11,000 $11,000 to 12,000 $12,000 to 13,000 $13,000 to 14,000 $14,000 to 15,000 $15,000 to 16,000 $16,000 to 17,000 $17,000 to 18,000 $18,000 to 19,000 $19,000 to 20,000 over $20,000 Priority Urgent Normal RFP (low) Project
details

Next time

styling makes you frustratedly mumble ?F-me? ? remember, Formalize.Me is only a click away!

Formalize created by Nathan Smith Hosted by FireHost Licensed under GPL and MIT.