BLOG

  • Facebook
  • Twitter

フォームのチェックボックスやラジオボタンをオリジナルデザインにカスタマイズする時のCSS

ホームページの入力フォームをコーディングする時、ラジオボタンやチェックボックスのデザインがブラウザのデフォルト表示と異なる場合によく使うCSSを紹介します。

デザインによってはCSSのみで解決できるものもありますが、画像を使ってサクッとフォーム部品をカスタマイズしたいときにおすすめです。

オリジナルデザインのラジオボタンの作り方

では次はオリジナルデザインでラジオボタンをコーディングします。

チェックボックスのときと同じようにラジオボタンがオン・オフ両方の場合の画像を用意します。

css_radiobtn_example_01

HTMLは次のようなコードです。

次はCSSです。

デフォルト表示のラジオボタンを見えなくして、input[type=”radio”]を囲んでいるlabel要素にスタイルを指定します。
さらに、ラジオボタンのオン・オフによってlabel要素の背景を切り替えたいのでjQueryを読み込んで次のように書いてやります。

これでラジオボタンをクリックするたびに.radio_onが付与されたりはずれたりして背景が切り替わります。
実際の動きは以下のデモをどうぞ。

 

フォーム部品のコーディングは意外に手間がかかるのですが、こうしたコードを覚えておくと応用させて使うのにも便利です。
以上、チェックボックスやラジオボタンをオリジナルデザインの画像で表示させたい時のCSSの紹介でした。

スマホやタブレットでも見栄え良し。中小企業のブランディング力をアップするホームページ制作を承っております。

その他のオススメの記事

ホームページのことは何でもお気軽にご相談ください!

092-406-8630

平日10:00〜18:00セールス目的のお電話はご遠慮ください

シンス株式会社

Webマーケティングのお役立ち情報を発信しています!