CSSでラジオボタンやチェックボックスをカスタマイズする方法｜基本設定から実装手順まで徹底解説！

2025年9月10日

生徒

ペン博士！ラジオボタンやチェックボックスをカスタマイズしたいのですが、やり方が分からなくて困っています…

ペン博士

ラジオボタンやチェックボックスをカスタマイズする方法じゃな！覚えればサイトに合わせて自由にデザインできるぞ！しっかり理解するんだぞ！

生徒

そうなんですね！ありがとうございます！

ラジオボタンやチェックボックスを使うとき、「デフォルトの見た目がシンプルすぎてデザインに合わない」と悩んだことはありませんか？本記事では、CSSでボタンの見た目を自由にカスタマイズする方法を解説します。

「学習→就職」につなげた受講生のリアルな体験談も公開中！
働き方を変えたい方にも響くストーリーです。

吉池さん
Web制作を体系的に学びたいと考え、WithCodeに入会されました。卒業後は、WithCode経由で実案件を経験したほか、ご自身でも案件を獲得。今後はWeb系の業務に携わりたいという思いから転職活動を行い、受託開発の会社への転職を成功させました。

詳しくはこちらの記事をご覧ください。

吉池さんの主な制作実績はこちら

信用力向上を目的にした新規HP制作

株式会社YOURDELT 様

CSSでラジオボタンをカスタマイズする

ペン博士

ラジオボタンをオリジナルデザインに変更する手順を解説するぞ！まずが基本となるHTMLを用意し、その後にボタンの枠や選択時の見た目をCSSで設定していくんじゃ！

HTMLの作成

まずは、HTMLでラジオボタンの基本構造を作成します。

<label class="RadioBox">
  <input name="radio" class="RadioBox-Input" type="radio">
  <span class="RadioBox-Text">ラジオボタンA</span>
</label>
<label class="RadioBox">
  <input name="radio" class="RadioBox-Input" type="radio">
  <span class="RadioBox-Text">ラジオボタンB</span>
</label>

実装結果

ラジオボタンA ラジオボタンB

この段階ではデフォルトのラジオボタンが表示されます。
また、サイズの計算をわかりやすくするために全要素に「box-sizing: border-box; 」を指定しておくとよいでしょう。枠線や余白を含めて幅や高さが計算される仕組みとなり、配置を調整しやすくなります。

* {
  box-sizing: border-box;
}
*::before {
  box-sizing: border-box;
}
*::after {
  box-sizing: border-box;
}

また、省略することも可能です。

*,
*::before,
*::after {
  box-sizing: border-box;
}

デフォルトのラジオボタンを非表示にする

ここからデザインを調整するには「appearance: none;」を指定し、標準のラジオボタンを非表示にします。これにより、CSSで自由にカスタマイズすることができます。

.RadioBox-Input {
  appearance: none;
  position: absolute;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

ラジオボタンの見た目を変更する

1. ラジオボタンの外枠を設定する

ラジオボタンの外枠を設定します。
その際「::before」を利用すると、未選択時の外枠を表現できます。

.RadioBox-Text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid green; 
  background: #fff;
  box-sizing: border-box;
}

2. 位置を調整する

テキストとボタンの位置を調整するために、「center」で中央揃えを行います。

.RadioBox {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  margin-right: 16px;
  position: relative;
}

3. ボタンとして機能させる

内側の円は、選択された時だけ表示されるように制御します。
「input:checked」と隣接セレクタ「+」を組み合わせ、チェック状態を反映します。

その結果、クリック時のみ内側の丸が現れ、ラジオボタンとして動作します。

.RadioBox-Text::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: blue;      
  opacity: 0;            
  transition: opacity 0.2s ease;
}

/* 選択されたときに ::after を表示 */
.RadioBox-Input:checked + .RadioBox-Text::after {
  opacity: 1;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

これでクリックした時のみ内側の丸が現れ、ラジオボタンとして機能するようになります。

CSSでチェックボックスをカスタマイズする

ペン博士

チェックボックスをオリジナルデザインに変更する手順を解説するぞ！まずが基本となるHTMLを用意し、その後に枠線やチェックマークをCSSで設定していくんじゃ！

HTMLの作成

まずはHTMLでチェックボックスの基本構造を作成します。

<label class="CheckBox">
  <input name="checkbox" class="CheckBox-Input" type="checkbox">
  <span class="CheckBox-Text">チェックボックスA</span>
</label>
<label class="CheckBox">
  <input name="checkbox" class="CheckBox-Input" type="checkbox">
  <span class="CheckBox-Text">チェックボックスB</span>
</label>

実装結果

チェックボックスA チェックボックスB

デフォルトのチェックボックスを非表示にする

チェックボックスも標準のままでは、自由にカスタマイズすることができません。
そのため、「appearance: none;」を指定し、デフォルトのチェックボックスを非表示にします。

.CheckBox-Input {
  appearance: none;
  position: absolute;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

チェックボックスの見た目を変更する。

1. 位置を調整する

テキストとチェックボックスの位置を調整するために、「flexbox」で中央揃えを行います。

.CheckBox-Text {
  position: relative;
  display: flex;
  align-items: center;
  padding-left: 28px;
  line-height: 1.4;
}

2. チェックボックスの外枠を設定する

チェックボックスの外枠は正方形で表現し、ここでは18×18pxの枠線を付けます。

.CheckBox-Text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border: 2px solid orange;   /* 外枠色 */
  border-radius: 4px;        
  background: #fff;
  box-sizing: border-box;
  transition: border-color .2s ease, background-color .2s ease;
}

3. チェック時に「✔」を描画する

チェックが入ったときに「✔」マークを表示します。
「transform: rotate(45deg);」で斜めに傾けると、「✔」マークの形に仕上がります。

.CheckBox-Text::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 50%;
  transform: translateY(-60%) rotate(45deg);
  width: 6px;
  height: 12px;
  border-right: 2px solid orange;
  border-bottom: 2px solid orange;
  opacity: 0; /* 初期は非表示 */
}

.CheckBox-Input:checked + .CheckBox-Text::after {
  opacity: 1;
}

実装結果

See the Pen Untitled by せいや (@ddwkeakz-the-reactor) on CodePen.

生徒

ペン博士、ラジオボタンやチェックボックスを自由にカスタマイズする方法が理解できました。まずはデフォルトのボタンを非表示にするところから始めるんですね！

ペン博士

うむ、これらをしっかり理解して今後のWebサイト制作に生かすんじゃぞ！

生徒

ありがとうございます！この学びを今後のWebサイト制作に役立てます！

まとめ

本記事では、CSSでボタンの見た目を自由にカスタマイズする方法を解説しました。CSSでのチェックボックスやラジオボタンのカスタマイズのポイントを以下にまとめます。

・デフォルトのボタンを非表示にしてからカスタマイズするのが基本
・ラジオボタンは円形の枠を設定し、選択時に内側の丸を出すことで自然な操作感を実現できる
・チェックボックスは正方形の枠を作成し、チェック時に✔マークを描画することでわかりやすい操作感を実現できる
・配置や位置の調整を行うことで、テキストとのバランスがとれて見やすいデザインになる

これらを押さえることで、デザイン性と使いやすさを両立したフォームを作成することができます。結果として、サイト全体の印象も大きく向上できるでしょう。