ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : HTML/CSS

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

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

オリジナルデザインのチェックボックスの作り方

チェックボックスのデザインがオリジナルの場合、次のようにチェックボックス通常時とチェック時の画像を用意しましょう。

css_checkbox_example_01

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

CSSは次のように書きます。

appearance:none;でチェックボックスのデフォルトCSSを打ち消し、空いたスペースに背景画像を設定しています。

チェックした時はbefore擬似要素が重なるように絶対配置をします。すると、チェックボックスをクリックするたびに画像が切り替わって見えます。

実際の動きは以下のデモをご確認ください。

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

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

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

css_radiobtn_example_01

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

次はCSSです。

デフォルト表示のラジオボタンを見えなくして、input[type=”radio”]を囲んでいるlabel要素にスタイルを指定します。

さらに、ラジオボタンのオン・オフによってlabel要素の背景を切り替えたいのでjQueryを読み込んで次のように書いてやります。

これでラジオボタンをクリックするたびに.radio_onが付与されたりはずれたりして背景が切り替わります。

実際の動きは以下のデモをどうぞ。

フォーム部品のコーディングは意外に手間がかかるのですが、こうしたコードを覚えておくと応用させて使うのにも便利です。

以上、チェックボックスやラジオボタンをオリジナルデザインの画像で表示させたい時のCSSの紹介でした。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。