[CSS]モバイル端末にも対応、ブラウザごとに異なるデザインのフォームを美しくするフレームワーク -Formalize CSS

既存のフォームにも簡単に適用できる、各ブラウザ、各OSや各モバイルごとのフォームの異なるデザインのギャップを埋め、美しくするフレームワークを紹介します。

Formalize CSS
デモページ

[ad#ad-2]

サポートしているOSはWindow, Mac OS X, Linux、ブラウザはIE6/7/8/9, Firefox, Chrome, Safari, Opera、モバイルはAndroid, iOS(iPhone, iPad)などです。

下記のキャプチャは、Windows XP + Firefox 3.6のものです。
他の各ブラウザやモバイルでの表示は、元記事の下部「Screenshots」に掲載されています。
Formalize CSS

Formalize CSS：ノーマル時の表示

デモ：normal

[ad#ad-2]

Formalize CSS：disabled時の表示

デモ：disabled

Formalize CSS：エラー時の表示

デモ：error

Formalize CSSの実装

フォームのHTMLは既存のものでも簡単に適用できるようになっています。
実装にはjQueryを使用し、下記の3ファイルを外部ファイルとして記述します。

HTML

<link rel="stylesheet" href="assets/stylesheets/master.css" />
<script src="assets/javascripts/jquery.js"></script>
<script src="assets/javascripts/formalize.js"></script>

「master.css」で必要なスタイルシートを全てインポートします。