【簡単】cssでラジオボタンをカスタマイズする方法

前職はトヨタ自動車株式会社、現在は複数のweb制作会社のパートナーとしてCMS・ECサイト構築を担当しております。

• CMS・ECサイト構築歴2年以上
• 制作実績件数70件以上
• 15以上のキーワードで検索結果の10位以内を獲得

• cssでラジオボタンをカスタマイズする方法が知りたい。

• Contact Form 7やMW WP Form使用してお問い合わせフォームを作るが、デフォルトのラジオボタンのデザインがダサい…

• コピペで使える、簡単で分かりやすいcssコードを記載してほしいな！

と疑問を抱えている方の悩みを解決できる記事になってます。

なぜなら、これから紹介する『ラジオボタンのカスタマイズ方法』は、実案件で使用しているからです。

この記事を読み終えることで、『cssでラジオボタンをカスタマイズする方法』を理解することができます。

【簡単】cssでラジオボタンをカスタマイズする方法

１）カスタマイズ後のラジオボタンとCSSコードの共有

カスタマイズ後のラジオボタンは、以下のようになります。

また、cssコードは以下のようになります。

input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -2px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

htmlコードは以下のようになります。

<input type="radio" id="name">
<label for="name">ラジオボタン</label>

２）デフォルトのラジオボタンのCSSを無効化（リセット）する

まずは、デフォルトのラジオボタンのcssを無効化（リセット）します。

input[type="radio"] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

『appearance: none;』を記述することで、ブラウザ別に設定されているラジオボタンのcssを無効化（リセット）することができます。

３）ラジオボタンに独自デザインのCSSを記述する

ブラウザ別に設定されているラジオボタンのcssを無効化（リセット）したら、ラジオボタンに独自のcssを記述します。

チェックされた時の『丸印』は、疑似要素で再現します。

input[type="radio"] {
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  border-radius: 50%;
  vertical-align: -2px;
}

input[type="radio"]:checked:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #000;
  content: '';
}

説明不要かと思いますが、『:checked』は、『ラジオボタンにチェックを入れた時』という意味です。

今回は、リセットcssは導入しておりませんが、各々お使いのリセットcssや文字サイズなどによってラジオボタンの上下の一が異なる為、『vertical-align』を利用して調整してください！

まとめ

今回は、お問い合わせフォームでよく使用される『ラジオボタン』をカスタマイズする方法をご紹介しました。

難しいことは一切おこなっていない為、cssに詳しくない方でも理解できるのかなと思います。

今回は以上です！