【PR】を含みます。

Webデザイン

【CSS】ラジオボタンのデザインをカスタマイズする方法

CSS ラジオボタンのデザインをカスタマイズする方法

Webサイトやアプリケーションで使用されるラジオボタンは、デフォルトのデザインがブラウザによって異なり、統一感のない見た目になってしまうことがあります。

また、サイトのデザインに合わせてカスタマイズしたい場合も多いでしょう。

この記事では、CSSを使ってラジオボタンのデザインをカスタマイズする方法を初心者向けに詳しく解説します。

appearance: none;プロパティを使ってデフォルトのスタイルを削除し、オリジナルのデザインを適用する方法から、選択時の色変更、ホバーアニメーションの実装まで、実用的なサンプルコード付きで紹介します。

基本的なカスタマイズから応用的なアニメーションまで解説しているので、ぜひ最後までお読みください。

チェックボックスのデザインをカスタマイズする方法は以下の記事で解説しています。

あわせて読む
CSS チェックボックスのデザインをカスタマイズする方法

【CSS】チェックボックスのデザインをカスタマイズする方法

もくじチェックボックスのデザインをカスタマイズする方法サンプル実装コードコード解説チェック時のチェックマークの色だけを変更する（背景は白のまま）サンプル実装コードチェックボックスからチェックマークをは ...

ラジオボタンのデザインをカスタマイズする方法

サンプル

実装コード

Copyをクリックするとコピーできます。

HTML
Copy
<label class="radio-container">
  <input class="radio" type="radio" name="radio">
  ラジオボタン
</label>
<label class="radio-container">
  <input class="radio" type="radio" name="radio">
  ラジオボタン
</label>
CSS
Copy
.radio-container {
  display: inline-block;
  cursor: pointer;
}
/* 選択前のデザイン */
.radio {
  position: relative;
  top: -2px;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #c6c6c6;
  border-radius: 100%;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* デフォルトスタイルを削除 */
}
/* 選択後のデザイン */
.radio:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23f09896" /></svg>');
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
  border-color: #f09896;
}

コード解説

選択前のデザイン

position: relative;
top: -2px;
ラジオボタンの位置を微調整します。
width: 15px;
ラジオボタンの幅を指定します。
height: 15px;
ラジオボタンの高さを指定します。
margin: 0 3px 0 0;
ラジオボタンの余白をリセットしつつ、右側に3pxの余白を追加します。
vertical-align: middle;
ラジオボタンを縦方向に中央揃えします。
background-color: #fff;
背景色を設定します。
border: 1px solid #c6c6c6;
ボーダーの幅、スタイル、色を指定します。
border-radius: 100%;
円にします。
appearance: none;
ラジオボタンのデフォルトスタイルを削除します。
これにより、カスタムスタイルが適用可能になります。

選択後のデザイン

.radio:checked
ラジオボタンが選択された状態のスタイルを指定できます。
background-image
SVG形式の円画像をデータURIとしてインラインで埋め込んでいます。
これにより、外部画像を使用せずに円を表示できます。
background-position: center;
背景画像を中央に配置します。
background-size: 11px;
背景画像のサイズを指定します。
background-repeat: no-repeat;
背景画像を繰り返さないようにします。
border-color: #f09896;
選択されたときのボーダーの色を指定します。

ラジオボタン選択時の円の色を変更する方法

サンプル

実装コード

円の色は、SVG形式の円画像（background-image）のfill="%23468fd6"で指定しています。

fill="%23468fd6"の%23は # 記号に対応し、468fd6が16進数カラーコードです。

Copyをクリックするとコピーできます。

HTML
Copy
<label class="radio-container">
  <input class="radio2" type="radio" name="radio2">
  ラジオボタン
</label>
<label class="radio-container">
  <input class="radio2" type="radio" name="radio2">
  ラジオボタン
</label>
CSS
Copy
.radio-container {
  display: inline-block;
  cursor: pointer;
}
/* 選択前のデザイン */
.radio2 {
  position: relative;
  top: -2px;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #468fd6;
  border-radius: 100%;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* デフォルトスタイルを削除 */
}
/* 選択後のデザイン */
.radio2:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23468fd6" /></svg>');
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
  border-color: #468fd6;
}

ラジオボタンにホバーアニメーションを実装

サンプル

実装コード

Copyをクリックするとコピーできます。

HTML
Copy
<label class="radio-container">
  <input class="radio3" type="radio" name="radio3">
  ラジオボタン
</label>
<label class="radio-container">
  <input class="radio3" type="radio" name="radio3">
  ラジオボタン
</label>
CSS
Copy
.radio-container {
  display: inline-block;
  cursor: pointer;
}
/* 選択前のデザイン */
.radio3 {
  position: relative;
  top: -2px;
  width: 15px;
  height: 15px;
  margin: 0 3px 0 0;
  vertical-align: middle;
  background-color: #fff;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23dfb1b0" /></svg>');
  background-position: center;
  background-size: 0px;
  background-repeat: no-repeat;
  border: 1px solid #c6c6c6;
  border-radius: 100%;
  transition: 0.3s;
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  appearance: none; /* デフォルトスタイルを削除 */
}
/* ホバー時のデザイン */
.radio3:hover {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23dfb1b0" /></svg>');
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
}
/* 選択後のデザイン */
.radio3:checked {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><circle cx="50" cy="50" r="40" stroke-width="3" fill="%23f09896" /></svg>');
  background-position: center;
  background-size: 11px;
  background-repeat: no-repeat;
  border-color: #f09896;
}

まとめ

この記事では、CSSでラジオボタンのデザインをカスタマイズする方法について解説しました。

今回のポイント

appearance: none; の活用
デフォルトのラジオボタンスタイルを削除して、カスタムデザインを適用する基本テクニック
SVGデータURIの使用
外部画像ファイルを使わずに、インラインで円のデザインを実装する効率的な方法
:checked疑似クラスの活用
選択状態のスタイルを指定して、ユーザビリティを向上させるテクニック
ホバーアニメーションの実装
transitionプロパティと:hover疑似クラスを組み合わせた、インタラクティブな要素の作成方法

実装時の注意点

  • appearance: none;はブラウザ対応のため、-webkit-appearance: none;や-moz-appearance: none;も併記する
  • SVGのfill属性で色を指定する際は、#記号を%23にエンコードする
  • アクセシビリティを考慮して、十分なコントラスト比を確保する
  • タッチデバイスでも使いやすいサイズに調整する

これらのテクニックを組み合わせることで、サイトのデザインに統一感のある、使いやすいラジオボタンを作成できます。

実際のプロジェクトでも積極的に活用してみてください。

チェックボックスのデザインをカスタマイズする方法は以下の記事で解説しています。

あわせて読む
CSS チェックボックスのデザインをカスタマイズする方法

【CSS】チェックボックスのデザインをカスタマイズする方法

もくじチェックボックスのデザインをカスタマイズする方法サンプル実装コードコード解説チェック時のチェックマークの色だけを変更する（背景は白のまま）サンプル実装コードチェックボックスからチェックマークをは ...

-Webデザイン
-