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

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

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

 

  • cssでラジオボタンをカスタマイズする方法が知りたい。
  • Contact Form 7やMW WP Form使用してお問い合わせフォームを作るが、デフォルトのラジオボタンのデザインがダサい…

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

 

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

 

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

 

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

 

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

1)カスタマイズ後のラジオボタンと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>

 

2)デフォルトのラジオボタンのCSSを無効化(リセット)する

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

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

 

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

 

3)ラジオボタンに独自デザインの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に詳しくない方でも理解できるのかなと思います。

 

今回は以上です!

SNSでもご購読できます。

コメントを残す

前の記事

次の記事