【PR】を含みます。

Webデザイン

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

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

CSSでラジオボタンのデザインをカスタマイズする方法を解説します。

appearance: none;でデフォルトのスタイルを削除後、カスタムデザインを当ててカスタマイズします。

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

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

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

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

サンプル

実装コード

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 {
  appearance: none; /* デフォルトスタイルを削除 */
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  margin: 0;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  background-color: #fff;
  position: relative;
  top: -2px;
}
/* 選択後のデザイン */
.radio:checked {
  border-color: #f09896;
  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-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

コード解説

選択前のデザイン

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

選択後のデザイン

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

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

サンプル

実装コード

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

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

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 {
  appearance: none; /* デフォルトスタイルを削除 */
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  margin: 0;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #468fd6;
  background-color: #fff;
  position: relative;
  top: -2px;
}
/* 選択後のデザイン */
.radio2:checked {
  border-color: #468fd6;
  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-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

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

サンプル

実装コード

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 {
  appearance: none; /* デフォルトスタイルを削除 */
  -webkit-appearance: none; /* Safari and Chrome */
  -moz-appearance: none; /* Firefox */
  margin: 0;
  margin-right: 3px;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  border-radius: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: #c6c6c6;
  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-size: 0px;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  top: -2px;
  transition: 0.3s;
}
/* ホバー時のデザイン */
.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-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}
/* 選択後のデザイン */
.radio3:checked {
  border-color: #f09896;
  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-size: 11px;
  background-repeat: no-repeat;
  background-position: center;
}

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

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

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

-Webデザイン
-