【2026年版】CSSでラジオボタン・チェックボックスを爆速カスタマイズ！コピペ用コード付
  1. 銀ねこアトリエ
  2. 海外ノマドブログ
  3. ウェブ制作
  4. CSS
  5. 【2026年版】CSSでラジオボタン・チ…
SHARE
FacebookXはてB！

【2026年版】CSSでラジオボタン・チェックボックスを爆速カスタマイズ！コピペ用コード付

公開日
メンテナンス日

CSSでラジオボタン・チェックボックスの見た目をおしゃれに変える方法を詳しく解説しました。

2026年現在、accent-color プロパティの登場で色変更は容易になりましたが、Web制作の現場では「ブランドに合わせた独自デザイン」を求められるシーンが依然として多いです。

この記事では、HTML/CSSを勉強中の方はもちろん、実務でUIデザインをブラッシュアップしたいエンジニアの方に向けて、モダンブラウザに対応した最新のカスタマイズ手法を紹介します。

ラジオボタン・チェックボックスの仕組みを理解すれば、どんなデザインも自由自在に作れるようになります。

とにかくすぐ使いたい！ という人は、目次から各デザインスニペット（コードサンプル）をコピペして使ってください。

WordPressの定番プラグイン「Contact Form 7」や、モダンなコンポーネント開発でもそのまま使えるコード付きです。（※以前主流だった MW WP Form 等にも対応可能です）

この記事を書いた人

神守 由理子/フロントエンドエンジニア

資金ゼロからフィリピンで起業したアラフィフ海外ノマドエンジニア。最近は「フィリピンお役立ち情報」「ナチュラルアンチエイジング」「人生から得た哲学」など実体験を発信。最近AIの発達でテックブログはお休みしているけど、IT業界10年以上でテクニカルディレクター（技術責任者）・エンジニア講師・ブリッジSEを経てLenzTechnologies Inc.を設立し、代表を務める。

XRead More

ラジオボタン・チェックボックスはそのままだとまったく可愛くない！

カスタマイズする理由から。

1つめ。ズバリ「見た目がよくなるから」です。HTMLのタグはCSS未使用の場合、各ブラウザに用意されているスタイルが適応されています。ラジオボタン、チェックボックスも同様です。
プレーンな状態で使うと次の通り青色で質素。このままだとウェブサイトのデザインによっては合わないし、カスタマイズした方がいいのは言うまでもありませんね。

ラジオボタン・チェックボックスはそのままだとまったく可愛くない！

2つめ。「各ブラウザごとに用意されているラジオボタン・チェックボックスなどのスタイルが違うから」です。
各ブラウザごとのラジオボタンやチェックボックスを比べてみます（私のマシンがMacなのでIE、Edgeは確認していません）。
比較すると本当にわずかですが細かい違いがわかります。デスクトップだとIEやEdge、モバイルでもっと違うと思います。

各ブラウザごとに用意されているラジオボタン・チェックボックスなどのスタイルが違うから

カスタマイズするメリットは見た目もよくなり、誰がどのブラウザで見てもデザインがブレないことです。

デメリットとしてはいつもよりコードをたくさん書く必要があります。
まあ、大した量ではないので大丈夫です。

accent-color である程度色が変えられるようになった【2026年追記】

2021年以降の導入された accent-color プロパティを使うと、ラジオボタン・チェックボックスの色が変えられるようになりました。

100% コントロールは出来ませんが、難しいコードを書かなくても多少見た目を調整ができるようになりました。

accent-color である程度色が変えられるようになった 
input { accent-color: #ff3b42; }
MDN accent-color のブラウザ対応

Safariは注意

  • 「読みやすさ」を優先するため、指定した色が明るすぎると、勝手に少し暗い色に置き換えて表示することがある。
  • 他のブラウザでは背景色に合わせてチェックマーク（レ点）を白か黒に自動で切り替えますが、背景色によってはチェックが見えなくなることがあります。
勝手に少し暗い色に置き換えて表示

Safariは薄ピンクが視認性を考慮して茶色くなった。

Chromeはaccent-colorはそのまま、チェックやサークルの色が調整される。

このように、 「ブラウザの補正を許さず、100%デザインをコントロールしたい」 という場面では、このあと紹介する「appearance: none を使ったモダンな手法」や「擬似要素を使った完全カスタマイズ」が今でも正解です。

アクセシビリティを考慮してラジオボタン・チェックボックスをコーディングしよう（HTML）

通常のラジオボタン・チェックボックスの書き方です。
ラジオボタン・チェックボックスのボタンは直径10px程度で小さく、とくにスマフォでのタップ操作がかなり厳しいです。Googleの推奨するボタンサイズが縦横44px以上 。なので私は文字をクリック（もしくはタップ）したときにチェックできるよう、必ずlabelタグとセットで使います。

labelの使ったコーディング方法は2通りあります。

labelタグとinputタグを分ける方法

inputタグとlabelタグを紐づけるとlabelタグをタップしただけでチェックできるようになります。 inputタグにid属性、labelタグにfor属性を追加します。両方同じ値にします。

<input type="radio" value="multicolor" name="cat" >三毛ねこ</label>

labelタグの中に入れてしまう方法

inputタグをlabelタグの中に入れてしまいます。属性を追加しなくていいので楽チンです。

<label><input type="radio" value="multicolor" name="cat">三毛ねこ</label>

基本のラジオボタン・チェックボックスをCSSでカスタマイズ

ラジオボタンをカスタマイズ

labelタグとinputを分ける書き方でスタイリングしてみます。 基本のラジオボタン・チェックボックスをCSSでカスタマイズ

手順としては4ステップ。

  1. inputタグを隠す（appearance: none ）
  2. labelタグ内にボタンを置くスペースを作る
  3. 擬似要素before、afterを使ってラジオボタンの各パーツを作る
  4. 擬似クラスを使ってチェックが入った時にスタイルを変える
基本のラジオボタン・チェックボックスをCSSでカスタマイズ2
※ 今回はCSS設計などは無視します。

appearance: none に指定しますのでinputタグそのものは操作できなくなりますが、labelタグをクリックorタップすればそれに紐づいたinputタグもチェックが入った状態にできます。
inputタグとlabelタグは隣接しているので隣接セレクターが利用できます。チェックが入った状態のinputタグのすぐ次の要素へスタイリングができます。
擬似要素・beforeの上に重ねたafterのopacityを0にして隠しておき、チェックがついたら1にすることで表示します。

※ 以前は display: none で要素表示を削除してましたが、アクセシビリティに配慮すると appearance: none 方が適切です。

ボタン用のbefore&afterは高さと幅を持った要素を作るためにはdispplayをblockかinline-blockあたりに設定しておくのを忘れずに。

HTML 
<p class="radio-btns">
  <input type="radio" value="ラベル1" name="radio" id="radio1"><label for="radio1">ラベル1</label>
  <input type="radio" value="ラベル2" name="radio" id="radio2"><label for="radio2">ラベル2</label>
  <input type="radio" value="ラベル3" name="radio" id="radio3"><label for="radio3">ラベル3</label>
</p>
CSS 
label ~ label {
  margin-left: 15px;
}

input[type=radio] {
  margin-right: 8px;
}

/* ラジオボタン */
.radio-btns input[type=radio] {
  appearance: none;
}

.radio-btns label {
  position: relative;
  padding-left: 25px;
}

.radio-btns input[type=radio] + label::before {
  position: absolute;
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #ddd;
  left: 0;
  top: 0;
}

.radio-btns input[type=radio] + label::after {
  position: absolute;
  content: '';
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2e3175;
  left: 3px;
  top: 3px;
  opacity: 0;
  transition: .3s;
}

.radio-btns input[type=radio]:checked + label::after {
 opacity: 1;
}

ポイントは「擬似要素」「擬似クラス」「隣接セレクター」です。

擬似要素

擬似要素を使うと要素内に擬似的に要素を作ることができます。擬似要素の中にbeforeとafterがあります。beforeは要素内の最初、afterは最後に要素を追加できます。 contentプロパティがセットで、値に文字なども追加できます。ちなみに擬似要素を指定するときは::（コロン2つ）を使用します。

基本のラジオボタン・チェックボックスをCSSでカスタマイズ2 
element::before {
  content: 'こんにちは';
}

inputタグや、brタグのように中にコンテンツを内包できないタグには擬似要素が追加できないことを念頭に置いておきましょう。

擬似クラス

擬似クラスを使うとそのタグの特定の状態を指定できます。この場合だとラジオボタンに「チェックが入った状態」のcheckedを使います。擬似クラスを指定するときは:（コロン1つ）を使います。

element:checked

隣接セレクター

となり合った要素の指定方法です。要素同士を ＋（プラス）で繋ぎます。

element + element

チェックボックスも同じHTMLの構成でスタイリング

上に重ねる擬似要素afterを利用してチェックマークを作ります。 今回は特別な素材を用意せず、borderとtransform（変形）のrotate（回転）を利用してCSSのみで作ります。

チェックボックスも同じHTMLの構成でスタイリング 
display: block;
width: 6px;
height: 10px;
transform: rotate(45deg); /*四角を45度傾ける*/
border-right: 3px solid #c2004a;
border-bottom: 3px solid #c2004a;
HTML 
<p class="check-btns">
  <input type="checkbox" value="ラベル1" name="check" id="check1"><label for="check1">ラベル1</label><input type="checkbox" value="ラベル2" name="check" id="check2"><label for="check2">ラベル2</label><input type="checkbox" value="ラベル3" name="check" id="check3"><label for="check3">ラベル3</label>
</p>
CSS 
label ~ label {
  margin-left: 15px;
}

input[type=checkbox] {
  margin-right: 8px;
}

/* ベースのチェックボックス */
.check-btns input[type=checkbox] {
  appearance: none;
}

.check-btns label {
  position: relative;
  padding-left: 25px;
}

.check-btns input[type=checkbox]  + label::before {
  position: absolute;
  content: '';
  display: block;
  width: 15px;
  height: 15px;
  background: #fff;
  border: 1px solid #ddd;
  left: 0;
  top: 0;
}

.check-btns input[type=checkbox]  + label::after {
  position: absolute;
  content: '';
  display: block;
  width: 6px;
  height: 10px;
  transform: rotate(45deg);
  border-right: 3px solid #c2004a;
  border-bottom: 3px solid #c2004a;
  left: 4px;
  top: 0;
  opacity: 0;
  transition: .3s;
}

.check-btns input[type=checkbox]:checked + label::after {
  opacity: 1;
}

labelタグに入れ子にする場合

入れ子にする場合は、文字をspanタグなどのなかに入れます。 擬似要素を作るために必要です。

ラジオボタン・チェックボックスのスニペット（サンプルコード）

CodePenにいくつかコードを掲載しています。興味ある方はコピペで使ってみてください。

HTMLはこちらを共通で使います。

<!--チェックボックス-->
<p class="check-btns">
  <input type="checkbox" value="ラベル1" name="check" id="check1"><label for="check1">ラベル1</label><input type="checkbox" value="ラベル2" name="check" id="check2"><label for="check2">ラベル2</label><input type="checkbox" value="ラベル3" name="check" id="check3"><label for="check3">ラベル3</label>
</p>
<!--ラジオボタン-->
<p class="radio-btns">
  <input type="radio" value="ラベル1" name="radio" id="radio1"><label for="radio1">ラベル1</label><input type="radio" value="ラベル2" name="radio" id="radio2"><label for="radio2">ラベル2</label><input type="radio" value="ラベル3" name="radio" id="radio3"><label for="radio3">ラベル3</label>
</p>

ズームしながら出現するチェックボックス

ズームしながら出現するチェックボックス
CSS 
label ~ label {
  margin-left: 30px;
}

/* ベースのチェックボックス */
.check-btns input[type=checkbox] {
  appearance: none;
}

.check-btns label {
  position: relative;
  padding-left: 25px;
}

.check-btns input[type=checkbox]  + label::before {
  position: absolute;
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  background: #ddd;
  left: 0;
  top: -3px;
}

.check-btns input[type=checkbox]  + label::after {
  position: absolute;
  content: '';
  display: block;
  width: 8px;
  height: 12px;
  transform: rotate(45deg) scale(0, 0);
  border-right: 3px solid #c2004a;
  border-bottom: 3px solid #c2004a;
  left: 5px;
  top: -2px;
  transition: .3s;

}

.check-btns input[type=checkbox]:checked + label::after {
    transform: rotate(45deg) scale(1, 1);
}

デモ : ズームしながら出現するチェックボックス CodePen

波紋が広がるラジオボタン

波紋が広がるラジオボタン
CSS 
label ~ label {
  margin-left: 30px;
}/* ベースのラジオボタン */

.radio-btns input[type=radio] {
  appearance: none;
}

.radio-btns label {
  position: relative;
  padding-left: 25px;
  color: #138eb0;
  z-index: 1;
}

.radio-btns input[type=radio]  + label::before,
.radio-btns input[type=radio]  + label::after {
  position: absolute;
  content: '';
  display: block;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: #b1ecfc;
  left: 0;
  top: -3px;
  z-index: -1;
  transform: scale(0, 0);
}

/* 波紋のパート */
.radio-btns input[type=radio]  + label::before {
  background: radial-gradient(transparent, #b1ecfc);/*円形グラデーション*/
}

.radio-btns input[type=radio]:checked + label::before {
  animation: spread-bubble .8s linear;
  animation-iteration-count: 2;
}

.radio-btns input[type=radio]  + label::after {
  background: #49aec9;
  transition: .3s;
  opacity: 0;
}

.radio-btns input[type=radio]:checked + label::after {
  transform: scale(1, 1);
  opacity: 1;
}

/* 波紋のアニメーション */
@keyframes spread-bubble {
  0% {
    opacity: 0;
  }
  50% {
    transform: scale(2, 2);
    opacity: 1;
  }
  100% {
    transform: scale(4, 4);
    opacity: 0;
  }
}

デモ : 波紋が広がるラジオボタン｜CodePen

スマフォやアプリに使えるラジオボタン

スマフォやアプリに使えるラジオボタン
CSS 
label ~ label {
  margin-left: 30px;
}

/* ベースのラジオボタン */
.radio-btns input[type=radio] {
  appearance: none;
}

.radio-btns label {
  position: relative;
  padding: 15px 20px 15px 60px;
  display: inline-block;
  color: #fff;
  font-weight: bold;
  background: #111122;
  letter-spacing: 0.1em;
  border-radius: 50px;
  box-shadow: 2px 2px 0 rgba(0, 0, 0, .3);
}

.radio-btns input[type=radio]  + label::before,
.radio-btns input[type=radio]  + label::after {
  position: absolute;
  content: '';
  display: block;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
}

/* 下 */
.radio-btns input[type=radio]  + label::before {
  width: 30px;
  height: 15px;
  border-radius: 30px;
  display: block;
  background: #aaa;
  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .3);
}

.radio-btns input[type=radio]  + label::after {
  height: 15px;
  width: 15px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 1px 0 0 rgba(0, 0, 0, .1);
  transition: .1s;
}

.radio-btns input[type=radio]:checked + label::after {
  left: 30px;
  box-shadow: -1px 0 0 rgba(0, 0, 0, .1);
  background: #ff3b42;
}

.radio-btns input[type=radio]:checked + label {
  background: #1f1f52;
}

デモ : スマフォやアプリに使えるラジオボタン｜CodePen

スピンしながらチェックが入るラジオボタン

スピンしながらチェックが入るラジオボタン
CSS 
.radio label {
  position: relative;
  padding-left: 25px;
  display: inline-block;
}

.radio label ~ label{
  margin-left: 15px;
}

.radio input[type=radio] {
  appearance: none;
}

.radio input[type=radio] + span::before {
  content: "";
  display: block;
  left: 0;
  top: 13px;
  position: absolute;
  border-top: 8px solid transparent;
  border-left: 17px solid #c03363;
  border-bottom: 8px solid transparent;
  opacity: 0;
  transition: .3s;
}

.radio input[type=radio]:checked+span::before {
  transform: rotateX(540deg);
  opacity: 1;
}

デモ : スピンしながらチェックが入るラジオボタン｜CodePen

WordPressのフォームのカスタマイズ方法

MW WP FormとContact Form 7でのフォームのカスタマイズ法もご紹介しています。 記事が長くなってしまったので以下にまとめてます。

よろしければ合わせてご一読ください。

WordPressのラジオボタンとチェックボックスをカスタマイズ

WordPressのフォームのデザインを変えたいことってありますよね？プラグインを使っているせいで、複雑なHTMLが出力...

まとめ

ラジオボタン、チェックボックスのカスタマイズって結構勉強になるんです。HTMLの親子関係、CSSの擬似クラス、セレクターの種類なんかも覚えられますしね。なんどもやっているうちに、頭に入ってくるのでオススメです。

セレクトボックスのカスタマイズ方法も追加しました！！こちらも合わせてお読みください。

コピペでOK！CSS セレクトボックス（select option）のカスタマイズ方法

フォームパーツのカスタマイズって難しいですよね？中でもセレクトボックス（select option）をCSSでカスタマイ...

さらにボタンのCSSスニペットの記事も追加しました！！

【CSSコピペで使える】かわいいボタンデザインコード・コードスニペット集！

実用性重視。おしゃれなボタンのコードスニペット集をつくりました！UI/UXの観点からどんなボタンが最適であるべきか解説つ...

みなさんのコーディングライフの一助となれば幸いです。

最後までお読みいただきありがとうございました。

  1. Previous
  2. Next