CSSでラジオボタン・チェックボックスをカスタマイズする方法｜デザイン自由化の完全手順

生徒

ペン博士！ラジオボタンやチェックボックスってデフォルトのままだとデザインに合わなくて…CSSで自由にカスタマイズする方法が知りたいです！

ペン博士

それは多くの初学者が躓くポイントじゃな！この記事では「appearanceプロパティで標準UIをリセットする方法」から「擬似要素を使ったフルカスタマイズ」まで、実践コードつきで丸ごと解説するぞ！

フォームを作るとき、ラジオボタンやチェックボックスのデフォルトデザインがサイトの雰囲気に合わず困った経験はありませんか？本記事では、CSSのappearanceプロパティと擬似要素（::before / ::after）を組み合わせて、ラジオボタン・チェックボックスを完全にカスタマイズする手順を解説します。コピーして使えるサンプルコードつきなので、初心者の方でもすぐに実装できます。

ラジオボタン・チェックボックスをCSSでカスタマイズする前に知っておくこと

ラジオボタン（input[type="radio"]）やチェックボックス（input[type="checkbox"]）は、ブラウザのデフォルトスタイルが適用されているため、そのままCSSを追加しても見た目がほとんど変わらないという問題があります。カスタマイズの第一歩は「ブラウザ標準スタイルのリセット」です。

なぜデフォルトのままだとカスタマイズが難しいのか

ブラウザはフォーム要素に対してOSネイティブのUIコンポーネントを描画します。そのため、background-colorやborderを指定しても反映されないケースが多く、初心者が「CSSが効かない」と感じる原因になっています。

• 原因①：ブラウザがOSのUIコンポーネントを優先して描画するため
• 原因②：appearanceプロパティがデフォルトでautoに設定されているため
• 原因③：input要素は置換要素であり、通常の要素とは異なるレンダリングルールが適用されるため

カスタマイズの基本方針：2つのアプローチ

本記事では両方の方法を解説しますが、デザインの自由度が最も高い「label擬似要素方式」を中心に詳しく説明します。

【方法①】appearance: none を使ったチェックボックス・ラジオボタンのカスタマイズ

最もシンプルなカスタマイズ方法は、appearance: noneでブラウザデフォルトUIを無効化し、直接CSSでスタイルを当てる手法です。HTML構造を変えず手軽に実装できるため、小規模なカスタマイズに向いています。

チェックボックスのカスタマイズ：基本コード

以下のコードで、標準のチェックボックスをオリジナルデザインに変更できます。

/* チェックボックスのリセットとカスタマイズ */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

/* チェック状態のスタイル */
input[type="checkbox"]:checked {
  background-color: #4a90e2;
  border-color: #4a90e2;
}

/* チェックマーク（::after擬似要素） */
input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 5px;
  width: 6px;
  height: 11px;
  border: 2px solid #fff;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}

• appearance: none：ブラウザ標準UIを完全に無効化するキープロパティ
• -webkit-appearance: none：Safari・古いChrome向けのベンダープレフィックス。必ずセットで記述する
• :checked擬似クラス：チェック状態のときだけ適用されるスタイル。背景色変更やアイコン表示に使う
• ::after擬似要素：チェックマークの形をborderとtransformで描画する

ラジオボタンのカスタマイズ：基本コード

ラジオボタンは円形であることが特徴です。border-radius: 50%を使って丸く整えます。

/* ラジオボタンのリセットとカスタマイズ */
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: #fff;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
}

/* 選択状態のスタイル */
input[type="radio"]:checked {
  border-color: #4a90e2;
}

/* 内側の塗りつぶし円（::after擬似要素） */
input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #4a90e2;
}

• border-radius: 50%：要素を完全な円形にする
• transform: translate(-50%, -50%)：内側の円を親要素の中央に正確に配置するテクニック
• width/heightの比率：内側円は外側円の約50%サイズにするとバランスよく見える

【方法②】inputを非表示にしてlabelの擬似要素でカスタマイズする方法

より高度なカスタマイズには、inputをvisually-hidden（視覚的に非表示）にして、labelの::before / ::afterで見た目をゼロから作る手法が最適です。この方法ならアニメーションや複雑な形状にも対応できます。

HTMLの構造：labelとinputの紐づけが重要

この方法は、<label>要素で<input>を囲むか、for属性とid属性で紐づけることが前提です。

<!-- チェックボックスの例 -->
<label class="custom-checkbox">
  <input type="checkbox" name="agree">
  <span class="checkbox-label">利用規約に同意する</span>
</label>

<!-- ラジオボタンの例 -->
<label class="custom-radio">
  <input type="radio" name="color" value="red">
  <span class="radio-label">赤</span>
</label>
<label class="custom-radio">
  <input type="radio" name="color" value="blue">
  <span class="radio-label">青</span>
</label>

CSSでinputを視覚的に非表示にする方法

display: noneではなく「visually-hidden」テクニックを使うことでアクセシビリティを保ちながらinputを非表示にできます。display: noneやvisibility: hiddenはスクリーンリーダーにも読み上げられなくなるため避けましょう。

/* inputを視覚的に非表示（アクセシビリティ保持） */
.custom-checkbox input,
.custom-radio input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);






WithCodeを体験できる初級コース公開中！







初級コース(¥49,800)が完全無料に！




期間：1週間
学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。




副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？



未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！




公式サイトから無料カウンセリングに申し込む →