Many young guns ask about how to style custom checkboxes and radio buttons in forms. I prepared a typical markup, a few lines of CSS and some JavaScript functions (Safari label behavior fix included).

デフォルトのフォームをクールにカスタマイズする方法。
以前、「Niceformでエレガントなフォーム生成 」というので独自フォームにデザイン変更する方法をお伝えしましたが、どういう仕組みか気になっていました。

独自フォームデザインの実装方法について書かれているサイトを発見したので仕組みを説明してみます。



仕組みとしては、label,inputタグがあったとします。
<label><input></label>

label の for 属性によって label と input は関連付けておきます。
例) <label for="test"><input type="checkbox" name="test" id="test"> Sample </label>

そして、<input> を CSSでポジションをずらすなどして不可視状態にします。これでデフォルトのフォームは消え去りました。

次に、<label>のバックグラウンドイメージをCSSで設定します。
未チェック、チェック済みの画像をCSSのクラスで作成しておき、デフォルトでは未チェックの画像を反映させます。

後はJavaScriptでonclickイベントによってclassNameを交互に切り替え、チェック/未チェック状態を表せばよいだけです。
仕組みとしては以上になります。

紹介サイト上のサンプルでは、具体的に、次の手順で実装しており、真似てみれば簡単に実現できると思います。
1) label, input を作る
2) チェックがON/OFF時の背景画像を指定したCSSを定義する
3) JavaScriptで一括してlabelタグにonclickイベントを追加
4) onclickで指定された関数が呼ばれたときにはlabelのクラスを交互に切り替えて画像でチェック/未チェックを表現する

JavaScriptで一括してonclickイベントを設定するのでHTMLが汚れる心配もありませんね。

フォームもデザインにこだわりたいWEBデザイナーさんには嬉しいサンプルではないでしょうか。