【HTML/CSS】コピペで作る！おしゃれなラジオボタンデザイン3選

Q: デフォルトのダサい丸いボタン（ラジオボタン）を消すにはどうすればいいですか？

CSSで<input type="radio">に対してdisplay: none;またはopacity: 0;を指定することで、デフォルトの丸いボタンを非表示にできます。 当記事のデザインはすべてこの手法でオリジナルのデザインを適用しています。

Q: ラジオボタンを縦に並べるのではなく「横並び」にするにはどうすればいいですか？

ラジオボタン全体を囲んでいる親要素（<div>など）のCSSに、display: flex;とgap: 10px;（隙間の調整）を追記するだけで、簡単に綺麗な横並びのレイアウトに変更できます。

Q: チェックされた時の「色」を自分のサイトのテーマカラーに変更できますか？

はい、簡単に変更可能です。 CSSコード内の:checked + label（チェックされた状態の指定）にあるbackground-colorやborder-colorのカラーコードをお好みの色に書き換えてください。

Q: ただの丸ではなく、オリジナルの「画像」やアイコンをラジオボタンとして使えますか？

可能です。 デフォルトのボタンを非表示にした上で、<label>要素のCSSにbackground-imageや擬似要素（::before）を使ってお好みの画像（SVGやPNGなど）を指定することで、画像付きのラジオボタンが作れます。

2026年2月25日2026年6月13日

Code Stockのボタン型ラジオボタンのデザイン例。スタンダードと枠線ありの2つのスタイル。

いつまで無駄なデザインに時間を費やしますか？自作コード × SWELL で
理想のサイトをカスタマイズ構築

面倒な基本構造やレスポンシブ対応はテーマに任せ、浮いた時間で「あなたにしかできないこだわりの独自カスタマイズ」をとことん追求してみませんか？

「SWELL」の徹底レビュー・詳細を見る

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

本記事では、カスタマイズ可能でシンプルなラジオボタンデザインのコードをご紹介します。

HTMLとCSSの両方をコピペすればすぐに利用できます。

コピペしたコードをカスタマイズし、自分好みにぜひ変更してみてください。

また、ラジオボタンの部分を作成するにはinputタグを利用します。

inputタグの使い方を詳しく知りたい人は「【HTML】inputタグの使い方：type種類・属性一覧とCSS装飾・JS連携」を一読ください。

【HTML】inputタグのtype種類一覧！属性の使い方とCSS装飾

もう無駄なレイアウトに凝るのやめたら？最速の土台 × 独自CSS で
SWELLをゴリゴリにカスタマイズ

レスポンシブ対応や基本レイアウトは最高峰テーマに任せませんか？浮いた時間で、流麗なアニメーションや標準設定を上書きする「あなただけの高度なビジュアル表現」をとことん突き詰めましょう。

「SWELL」であなたのデザインの限界を超える

※当サイトはアフィリエイト広告（SWELLプロモーション）を利用しています

おしゃれなフリー素材デザイン集

本サイトでは、ラジオボタン以外にも様々なHTML&CSSによるおしゃれな素材をご用意しています。

以下は、主なデザインカテゴリーです。

ぜひTOPページから「デザインギャラリー」を一読頂けますと幸いです。

Code Stock

ボタン型のラジオボタン（横並び）

ここでは、以下のボタン型のラジオボタン（横並び）デザイン例を記載しています。

ボタン型のラジオボタン（横並び）デザイン

スタンダード
枠線あり

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もラジオボタンページでは選択式でご用意しました。

調整項目一覧

基調色
並びの向き：横, 縦
形状：円, 四角
チェック時のアニメーション：あり, なし

ご興味があれば「ラジオボタン一覧ページ」を一読ください。

Code Stock

RADIO | Code Stock うまくコピペできない場合は、記事からもコピペできるよう準備しております。 Button type ボタン型のラジオボタン radio1 radio2 radio3 スタンダード▼ radio1 radio2 rad…

スタンダード

radio1 radio2 radio3

HTMLコード表示

<fieldset class="radio-1">
  <label>
    <input type="radio" name="radio-1" checked/>
    radio1
  </label>
  <label>
    <input type="radio" name="radio-1"/>
    radio2
  </label>
  <label>
    <input type="radio" name="radio-1"/>
    radio3
  </label>
</fieldset>

CSSコード表示

.radio-1 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3em 2em;
  border: none;
}

.radio-1 label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  cursor: pointer;
}

.radio-1 label::before,
.radio-1 label:has(:checked)::after {
  border-radius: 50%;
  content: '';
}

.radio-1 label::before {
  width: 18px;
  height: 18px;
  background-color: #e6edf3;
}

.radio-1 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  background-color: #2589d0;
  animation: anim-radio-1 .3s linear;
}

@keyframes anim-radio-1 {
  0% {
    box-shadow: 0 0 0 1px transparent;
  }
  50% {
    box-shadow: 0 0 0 10px #2589d033;
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}

.radio-1 input {
  display: none;
}

枠線あり

radio1 radio2 radio3

HTMLコード表示

<fieldset class="radio-2">
  <label>
    <input type="radio" name="radio-2" checked/>
    radio1
  </label>
  <label>
    <input type="radio" name="radio-2"/>
    radio2
  </label>
  <label>
    <input type="radio" name="radio-2"/>
    radio3
  </label>
</fieldset>

CSSコード表示

.radio-2 {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .3em 2em;
  border: none;
}

.radio-2 label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  cursor: pointer;
}

.radio-2 label::before,
.radio-2 label::after {
  border-radius: 50%;
  content: '';
}

.radio-2 label::before {
  width: 18px;
  height: 18px;
  border: 2px solid #dee5eb;
  box-sizing: border-box;
}

.radio-2 label::after {
  position: absolute;
  top: 50%;
  left: 9px;
  transform: translate(-50%, -50%);
  width: 9px;
  height: 9px;
  background-color: #dee5eb;
}

.radio-2 label:has(:checked)::after {
  background-color: #2589d0;
  animation: anim-radio-2 .3s linear;
}

@keyframes anim-radio-2 {
  0% {
    box-shadow: 0 0 0 1px transparent;
  }
  50% {
    box-shadow: 0 0 0 10px #2589d033;
  }
  100% {
    box-shadow: 0 0 0 10px transparent;
  }
}

.radio-2 input {
  display: none;
}

リスト型のラジオボタン（縦並び）

ここでは、以下のリスト型のラジオボタン（縦並び）デザイン例を記載しています。

リスト型のラジオボタン（縦並び）デザイン

枠線&背景色

実際のデザインプレビューとHTML＆CSSコードを記載しています。

さらに、以下の項目もラジオボタンページでは選択式でご用意しました。

調整項目一覧

基調色
並びの向き：横, 縦
形状：円, 四角, 角丸
チェック時のアニメーション：あり, なし

ご興味があれば「ラジオボタン一覧ページ」を一読ください。

Code Stock

枠線&背景色

radio1 radio2 radio3

HTMLコード表示

<fieldset class="radio-3">
  <label>
    <input type="radio" name="radio-3" checked/>
    radio1
  </label>
  <label>
    <input type="radio" name="radio-3"/>
    radio2
  </label>
  <label>
    <input type="radio" name="radio-3"/>
    radio3
  </label>
</fieldset>

CSSコード表示

.radio-3 {
  display: block;
  width: 200px;
  margin: 0 auto 2em;
  border: none;
}

.radio-3 label {
  display: flex;
  align-items: center;
  gap: 0 .5em;
  position: relative;
  max-width: 200px;
  margin-bottom: .4em;
  padding: .5em .7em;
  border: 1px solid #2589d0;
  border-radius: 3px;
  background-color: #2589d026;
  cursor: pointer;
}

.radio-3 label:has(:checked) {
  background-color: #2589d0;
  color: #fff;
}

.radio-3 label::before,
.radio-3 label:has(:checked)::after {
  border-radius: 50%;
  content: '';
}

.radio-3 label::before {
  width: 14px;
  height: 14px;
  background-color: #fff;
}

.radio-3 label:has(:checked)::after {
  position: absolute;
  top: 50%;
  left: calc(7px + .7em);
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  background-color: #2589d0;
}

.radio-3 input {
  display: none;
}