CSS Tips | 超実務コアCSSテクニック：UIパーツ － ラジオボタンカスタム

Web APP CSS
スポンサーリンク

ラジオボタンカスタムは「選択状態を“気持ちよく”伝える」UIテクニック

ラジオボタンは 「複数の中から1つだけ選ぶ」 という重要な役割を持つ UI パーツ。 だからこそ、選択状態がひと目で分かり、押しやすく、視認性が高いデザインが必要です。

標準のラジオボタンは小さくて見づらいことが多いので、 非表示の input + 見た目の円 + 選択時の変化 という構造でカスタムするのが定番です。

ここでは CSS と Tailwind CSS の両方で、 初心者でも迷わないように例題を交えて丁寧に解説します。

ラジオボタンの基本構造

input は残す（アクセシビリティのため）

appearance:none で見た目を消す

擬似要素で「選択状態の丸」を描く

label とセットでクリック範囲を広げる

この4つを守ると、どんなデザインでも安全にカスタムできます。

例1：最も基本の「丸いラジオボタン」

CSS 版

.radio-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.radio-wrap input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 50%;
  position: relative;
  transition: border-color 0.2s ease;
}

.radio-wrap input:checked {
  border-color: #2563eb;
}

.radio-wrap input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #2563eb;
  border-radius: 50%;
}
CSS
<label class="radio-wrap">
  <input type="radio" name="plan">
  <span>スタンダード</span>
</label>
HTML

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="radio"
    name="plan"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-full
           relative
           checked:border-sky-600
           checked:[&::after]:content-['']
           checked:[&::after]:absolute
           checked:[&::after]:inset-[4px]
           checked:[&::after]:bg-sky-600
           checked:[&::after]:rounded-full">
  <span>スタンダード</span>
</label>
HTML

深掘りポイント

ラジオボタンは「内側の丸」が選択状態を示すので、 ::after で内側の丸を描くのが最もシンプルで分かりやすい方法です。

例2：選択時に“ふわっと拡大”するラジオボタン

CSS 版

.radio-anim {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #64748b;
  border-radius: 50%;
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.radio-anim:checked {
  border-color: #22c55e;
  transform: scale(1.15);
}

.radio-anim:checked::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #22c55e;
  border-radius: 50%;
}
CSS
<label class="flex items-center gap-2">
  <input type="radio" name="color" class="radio-anim">
  <span>グリーン</span>
</label>
HTML

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="radio"
    name="color"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-full
           relative transition
           checked:border-emerald-500 checked:scale-110
           checked:[&::after]:content-['']
           checked:[&::after]:absolute
           checked:[&::after]:inset-[5px]
           checked:[&::after]:bg-emerald-500
           checked:[&::after]:rounded-full">
  <span>グリーン</span>
</label>
HTML

深掘りポイント

選択時に少し大きくするだけで、 「選んだ！」というフィードバックが強くなり、 UI がとても気持ちよくなります。

例3：外側のリングが光る“アクセントラジオボタン”

CSS 版

.radio-glow {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 2px solid #64748b;
  border-radius: 50%;
  position: relative;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.radio-glow:checked {
  border-color: #3b82f6;
  box-shadow: 0 0 0 4px rgba(59,130,246,0.3);
}

.radio-glow:checked::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: #3b82f6;
  border-radius: 50%;
}
CSS

Tailwind 版

<label class="flex items-center gap-2">
  <input
    type="radio"
    name="theme"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-full
           relative transition
           checked:border-blue-500
           checked:shadow-[0_0_0_4px_rgba(59,130,246,0.3)]
           checked:[&::after]:content-['']
           checked:[&::after]:absolute
           checked:[&::after]:inset-[5px]
           checked:[&::after]:bg-blue-500
           checked:[&::after]:rounded-full">
  <span>ブルー</span>
</label>
HTML

深掘りポイント

影（box-shadow）を使うと、 「選択した項目が浮き上がる」ように見え、 視認性が大きく向上します。

例4：カード型の「選択肢ごとに丸が付く」ラジオボタン

CSS 版

.option-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.option-card input {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #64748b;
  border-radius: 50%;
  position: relative;
}

.option-card input:checked {
  border-color: #2563eb;
}

.option-card input:checked::after {
  content: "";
  position: absolute;
  inset: 4px;
  background: #2563eb;
  border-radius: 50%;
}

.option-card:has(input:checked) {
  border-color: #2563eb;
  background: #f0f9ff;
}
CSS
<label class="option-card">
  <input type="radio" name="plan">
  <span>プレミアムプラン</span>
</label>
HTML

Tailwind 版（group を使う）

<label class="group flex items-center gap-3 p-4 border border-gray-200 rounded-xl cursor-pointer
              group-has-checked:border-sky-600 group-has-checked:bg-sky-50">
  <input
    type="radio"
    name="plan"
    class="appearance-none w-5 h-5 border-2 border-slate-500 rounded-full
           relative
           checked:border-sky-600
           checked:[&::after]:content-['']
           checked:[&::after]:absolute
           checked:[&::after]:inset-[4px]
           checked:[&::after]:bg-sky-600
           checked:[&::after]:rounded-full">
  <span class="text-slate-800">プレミアムプラン</span>
</label>
HTML

深掘りポイント

カード全体が選択状態を反映することで、 「どれを選んでいるか」がひと目で分かります。 設定画面やプラン選択でよく使われるパターンです。

ラジオボタンカスタムの設計ポイント

input は必ず残す（display:none は絶対に使わない）

キーボード操作やスクリーンリーダーが使えなくなるため、 appearance:none で見た目だけ消すのが正解です。

label とセットでクリック範囲を広げる

小さな丸だけをクリックさせるのは UX が悪いので、 label 全体をクリック可能にします。

状態変化は「色＋内側の丸＋影」のどれか

色だけ 色＋内側の丸 色＋影 など、変化を絞ると上品で分かりやすい UI になります。

そのまま使える「万能ラジオボタン」（Tailwind）

<label class="flex items-center gap-2">
  <input
    type="radio"
    name="choice"
    class="appearance-none w-5 h-5 border-2 border-gray-400 rounded-full
           relative
           focus:outline focus:outline-[3px] focus:outline-sky-500/40 focus:outline-offset-2
           checked:border-sky-600
           checked:[&::after]:content-['']
           checked:[&::after]:absolute
           checked:[&::after]:inset-[4px]
           checked:[&::after]:bg-sky-600
           checked:[&::after]:rounded-full">
  <span class="text-slate-800">選択してください</span>
</label>
HTML

影・フォーカスリング・選択丸が揃っていて、 どんな UI にも使える万能テンプレートです。

さいごに

ラジオボタンカスタムは、 「選択状態を分かりやすく」「押しやすく」「美しく」 するための UI デザインです。

ほんの少しの色や影の変化で、 選択体験が劇的に向上します。

もしあなたが作っているフォーム（設定画面、プラン選択、アンケートなど）があれば、 その画面に合わせた最適なラジオボタンデザインを一緒に作れます。

スポンサーリンク
タイトルとURLをコピーしました