このエントリーをはてなブックマークに追加 Twitterでツイート チェックボックスをカスタマイズ

チェックボックスやラジオボタンはブラウザごとにデザインに差異があり、ラベルを使った場合は距離はベースラインの位置が微妙に違うなど複数のブラウザでデザインを揃える上で(個人的に)悩ましいところです。その解決策!?というわけではないのですが、チェックボックスをカスタマイズし、独自デザインのチェックボックスを利用できるJavaScriptの1つに「CRIR(Checkbox & Radio Input Replacement)」があります。

CRIRの仕組みは、inputタグと連携するlabelタグを使い、
1. inputタグの表示位置を視覚外に強制移動
2. その代わりとして独自にデザインしたチェックボックスやラジオボタンのイメージをlabelタグの背景に設定
して、オリジナルのチェックボックスやラジオボタンのUIを実現。

JavaScriptソースではユーザエージェントでMacのSafariかどうかを判断しており、昔のSafariでは動かなかったのかもしれません。いまどきのSafariは大丈夫そうですが、バージョンによってはNGなのかもしれませんね。。。

投稿日:2010年1月21日
  • ※コメントは、スパム対策などのためIPアドレスにて制限しております。
  • ※誹謗や中傷、スパムなど、不適切な内容は公開いたしません。ご了承ください。