フォームのチェックボックスやラジオボタンをオリジナルデザインにカスタマイズする時のCSS
ホームページの入力フォームをコーディングする時、ラジオボタンやチェックボックスのデザインがブラウザのデフォルト表示と異なる場合によく使うCSSを紹介します。
デザインによってはCSSのみで解決できるものもありますが、画像を使ってサクッとフォーム部品をカスタマイズしたいときにおすすめです。
オリジナルデザインのラジオボタンの作り方
では次はオリジナルデザインでラジオボタンをコーディングします。
チェックボックスのときと同じようにラジオボタンがオン・オフ両方の場合の画像を用意します。
HTMLは次のようなコードです。
1 | <label class="radio_bg"><input type="radio" name="fruit"/>オレンジ</label> |
次はCSSです。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | input[type="radio"]{ filter: alpha(opacity=0); -moz-opacity:0; opacity:0; position: absolute; } .radio_bg{ background:url(../radiobtn.png) no-repeat left top; height: 30px; line-height: 30px; display: inline-block; padding: 0 0 0 40px; cursor: pointer; overflow: hidden; } .radio_on{ background-position:left bottom; } |
デフォルト表示のラジオボタンを見えなくして、input[type=”radio”]を囲んでいるlabel要素にスタイルを指定します。
さらに、ラジオボタンのオン・オフによってlabel要素の背景を切り替えたいのでjQueryを読み込んで次のように書いてやります。
1 2 3 4 5 6 7 8 | $(function () { $("input[type='radio']").change(function(){ if($(this).is(":checked")){ $('.radio_bg').removeClass("radio_on"); $(this).parent().addClass("radio_on"); } }); }); |
これでラジオボタンをクリックするたびに.radio_onが付与されたりはずれたりして背景が切り替わります。
実際の動きは以下のデモをどうぞ。
フォーム部品のコーディングは意外に手間がかかるのですが、こうしたコードを覚えておくと応用させて使うのにも便利です。
以上、チェックボックスやラジオボタンをオリジナルデザインの画像で表示させたい時のCSSの紹介でした。
スマホやタブレットでも見栄え良し。中小企業のブランディング力をアップするホームページ制作を承っております。