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