【コピペOK】CSSでチェックボックス・ラジオボタンをおしゃれにカスタマイズ【10選】

SHARE

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

チェックボックスとラジオボタンは、ブラウザ標準のままだと小さくて地味な見た目になりがちです。しかもOSやブラウザによってデザインがバラバラなので、サイトの雰囲気に合わないと感じたことがある方も多いのではないでしょうか。

この記事では、CSSだけでチェックボックスとラジオボタンをおしゃれにカスタマイズする方法を、コピペで使える見本10パターンで紹介します。色をサッと変える1行テクニックから、トグルスイッチ風やカード型まで、実際に動くプレビュー付きでまとめました。

お問い合わせフォーム全体を整えたい方は、フォームデザインのコピペ見本集とあわせて読むと、フォームまわりをまるごとおしゃれにできますよ。

目次 表示

目次へ

チェックボックスの見た目を変える方法は2つ

チェックボックスとラジオボタンのカスタマイズには、大きく分けて2つの方法があります。まずはこの2つを押さえておくと、見本のコードもすんなり理解できます。

見本1：accent-colorで色だけ変える

いちばん手軽なのが、accent-colorというCSSプロパティを使う方法です。たった1行追加するだけで、チェックボックスとラジオボタンの色をサイトのテーマカラーに合わせられます。

input[type="checkbox"],
input[type="radio"] {
  accent-color: #27ae60;
  width: 20px;
  height: 20px;
}

accent-colorで変わるのは色だけで、チェックマークの形やサイズ感はブラウザ標準のまま保たれます。そのためデザインが崩れる心配がほぼありません。「とりあえず色だけサイトに合わせたい」という場面なら、これで十分です。

appearance: noneでゼロからデザインする

形やアニメーションまで自由に変えたいときは、appearanceプロパティにnoneを指定して、ブラウザ標準の見た目をいったんリセットします。まっさらになったinput要素に、CSSで好きなデザインを描いていくイメージです。

この記事の見本2以降は、すべてこのappearance: none方式で作っています。以前はinput要素を非表示にしてlabel側に描き直す方法が主流でしたが、今はすべての主要ブラウザがappearanceに対応しているので、より短いコードでシンプルに書けます。

チェックボックスのデザイン見本【コピペOK】

ここからは、コピペでそのまま使える見本を紹介します。プレビューは実際に動くので、クリックしながら好みのデザインを探してみてください。使うときは、HTMLとCSSをセットでコピーすればOKです。

見本2：シンプルな角丸チェックボックス

まずは基本形です。角丸のボックスにチェックを入れると、緑色に塗りつぶされて白いチェックマークが表示されます。チェックマークは、borderで作ったカギ型を45度回転させて表現しています。

<label class="cw-check01">
 <input type="checkbox">
 <span>お知らせメールを受け取る</span>
</label>
.cw-check01 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.cw-check01 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #27ae60;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.cw-check01 input:checked {
  background: #27ae60;
}
.cw-check01 input:checked::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.cw-check01 input:focus-visible {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
}

見本3：ふわっとチェックが入るアニメーション

見本2にtransitionを足して、チェックマークがふわっと拡大しながら現れるようにしたバージョンです。背景色もやわらかく切り替わるので、クリックしたときの気持ちよさが変わります。プレビューを何度かクリックして、動きを確かめてみてください。

<label class="cw-check02">
 <input type="checkbox">
 <span>タスクを完了にする</span>
</label>
.cw-check02 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.cw-check02 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #3498db;
  border-radius: 4px;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cw-check02 input:checked {
  background: #3498db;
}
.cw-check02 input::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 6px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.cw-check02 input:checked::after {
  transform: rotate(45deg) scale(1);
  opacity: 1;
}
.cw-check02 input:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

見本4：丸型チェックボックス（ToDoリスト風）

border-radiusを50%にして、丸い形にしたチェックボックスです。さらに、チェックすると文字に打ち消し線が入って色が薄くなる小技も入れました。買い物リストやToDoリストのような使い方にぴったりです。

打ち消し線の部分は、チェック状態のinputの後ろにあるspanをCSSで指定して、文字色と装飾を切り替えています。

<label class="cw-check03">
 <input type="checkbox">
 <span>牛乳を買う</span>
</label>
.cw-check03 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.cw-check03 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #f39c12;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease;
}
.cw-check03 input:checked {
  background: #f39c12;
}
.cw-check03 input:checked::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
}
.cw-check03 input:checked ~ span {
  color: #aaa;
  text-decoration: line-through;
}
.cw-check03 input:focus-visible {
  outline: 2px solid #f39c12;
  outline-offset: 2px;
}

見本5：トグルスイッチ風

スマホの設定画面でおなじみの、横にスライドするスイッチです。見た目は完全にスイッチですが、中身はただのチェックボックスなので、フォームでそのまま使えます。オン・オフの切り替え項目によく合うデザインです。

<label class="cw-check04">
 <input type="checkbox">
 <span>通知を受け取る</span>
</label>
.cw-check04 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  cursor: pointer;
}
.cw-check04 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 48px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: #ccc;
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}
.cw-check04 input::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: left 0.3s ease;
}
.cw-check04 input:checked {
  background: #27ae60;
}
.cw-check04 input:checked::after {
  left: 25px;
}
.cw-check04 input:focus-visible {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
}

見本6：ボタン型（タグ選択風）

チェックボックスをまるごとボタンのような見た目にしたパターンです。興味のあるジャンルを複数選んでもらうときなど、選択肢を目立たせたい場面で活躍します。inputそのものは透明にしてlabel全体に重ねているので、ボタンのどこを押しても反応します。

チェックされているかどうかの判定には、:has()というセレクタを使っています。「中にチェック済みのinputを含んでいたら」という条件でlabel全体の色を切り替えられる便利な書き方で、現在はすべての主要ブラウザで使えます。くわしくは:has()の解説記事をご覧ください。

<label class="cw-check05">
 <input type="checkbox">
 <span>CSS</span>
</label>

選択肢を増やしたいときは、上のlabelをまるごと複製して、テキストだけ書き換えてください。

.cw-check05 {
  position: relative;
  display: inline-block;
  padding: 8px 22px;
  border: 2px solid #8e44ad;
  border-radius: 999px;
  background: #fff;
  color: #8e44ad;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  user-select: none;
}
.cw-check05 input {
  position: absolute;
  inset: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  border-radius: inherit;
}
.cw-check05:has(input:checked) {
  background: #8e44ad;
  color: #fff;
}
.cw-check05:has(input:focus-visible) {
  outline: 2px solid #8e44ad;
  outline-offset: 2px;
}

ラジオボタンのデザイン見本【コピペOK】

続いてラジオボタンです。ラジオボタンは、name属性の値が同じもの同士がひとつのグループになり、その中から1つだけ選べる部品です。コピペして使うときは、質問ごとにnameの値を変えてください。

作り方の考え方はチェックボックスと同じで、appearance: noneでリセットしてから丸いデザインを描いていきます。

見本7：シンプルなラジオボタン

丸い枠の内側に、選択中を示すドットが表示される定番の形です。ドットは疑似要素で作った小さな円を、中央にぴったり配置しています。

<label class="cw-radio01">
    <input type="radio" name="cw-r01" checked />
    <span>はい</span>
</label>
<label class="cw-radio01">
    <input type="radio" name="cw-r01" />
    <span>いいえ</span>
</label>
.cw-radio01 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.cw-radio01 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #3498db;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.cw-radio01 input:checked::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #3498db;
  transform: translate(-50%, -50%);
}
.cw-radio01 input:focus-visible {
  outline: 2px solid #3498db;
  outline-offset: 2px;
}

見本8：ドットがポンと入るアニメーション

見本7のドットに、ポンと弾むように現れるアニメーションを付けたバージョンです。scaleを0から1に変化させているだけですが、選んだ瞬間の手応えがぐっと良くなります。

<label class="cw-radio02">
    <input type="radio" name="cw-r02" checked>
    <span>クレジットカード</span>
</label> 
<label class="cw-radio02">
    <input type="radio" name="cw-r02">
    <span>銀行振込</span>
</label>
.cw-radio02 {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  cursor: pointer;
}
.cw-radio02 input {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 2px solid #e74c3c;
  border-radius: 50%;
  background: #fff;
  position: relative;
  cursor: pointer;
}
.cw-radio02 input::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #e74c3c;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease;
}
.cw-radio02 input:checked::after {
  transform: translate(-50%, -50%) scale(1);
}
.cw-radio02 input:focus-visible {
  outline: 2px solid #e74c3c;
  outline-offset: 2px;
}

見本9：角丸型ボタン（横並び選択）

見本6のボタン型と同じ発想で作った、1つだけ選べる角丸型ボタンです。配信頻度やサイズ選択など、選択肢が少なくてパッと選んでほしい場面に向いています。切り替えの判定には、こちらも:has()を使っています。

<label class="cw-radio03">
    <input type="radio" name="cw-r03" checked>
    <span>毎日</span>
</label> 
<label class="cw-radio03">
    <input type="radio" name="cw-r03">
    <span>週1回</span>
</label> 
<label class="cw-radio03"><input type="radio" name="cw-r03">
<span>月1回</span>
</label>

.cw-radio03 {
  position: relative;
  display: inline-block;
  padding: 8px 20px;
  border: 2px solid #16a085;
  border-radius: 999px;
  background: #fff;
  color: #16a085;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  user-select: none;
}
.cw-radio03 input {
  position: absolute;
  inset: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  border-radius: inherit;
}
.cw-radio03:has(input:checked) {
  background: #16a085;
  color: #fff;
}
.cw-radio03:has(input:focus-visible) {
  outline: 2px solid #16a085;
  outline-offset: 2px;
}

見本10：カード型（プラン選択風）

最後は、料金プランの選択画面でよく見かけるカード型のラジオボタンです。選択中のカードは枠線と背景色が変わり、右上に緑のチェックバッジが表示されます。情報量の多い選択肢を比較してもらうときに効果的です。

<label class="cw-radio04">
    <input type="radio" name="cw-r04" checked>
    <span class="cw-radio04-name">ベーシック</span>
    <span class="cw-radio04-price">月額500円</span>
</label> 
<label class="cw-radio04">
    <input type="radio" name="cw-r04">
    <span class="cw-radio04-name">プロ</span>
    <span class="cw-radio04-price">月額1,200円</span>
</label>
.cw-radio04 {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
  padding: 18px 24px;
  border: 2px solid #ddd;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.cw-radio04 input {
  position: absolute;
  inset: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  border-radius: inherit;
}
.cw-radio04-name {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.cw-radio04-price {
  font-size: 13px;
  color: #888;
}
.cw-radio04:has(input:checked) {
  border-color: #27ae60;
  background: #f0faf4;
}
.cw-radio04:has(input:checked)::after {
  content: "✓";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #27ae60;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
}
.cw-radio04:has(input:focus-visible) {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
}

カスタマイズするときの3つの注意点

appearance: noneで作り込むときは、見た目だけでなく使いやすさにも気を配ると、ワンランク上の仕上がりになります。ポイントは次の3つです。

  • フォーカス表示を消さない
  • labelで囲んでクリック範囲を広げる
  • cursor: pointerを忘れずに

フォーカス表示を消さない

Tabキーでフォームを移動する人にとって、いま選択中の場所を示すフォーカスの枠線は道しるべです。デザインを優先してoutline: noneで消してしまうと、キーボードでの操作がとても難しくなります。

そこでおすすめなのが:focus-visibleです。マウスでクリックしたときは枠線を出さず、キーボード操作のときだけ表示してくれるので、見た目と使いやすさを両立できます。この記事の見本には、すべてこの指定を入れてあります。

/* キーボード操作のときだけ枠線を表示する */
.cw-check01 input:focus-visible {
  outline: 2px solid #27ae60;
  outline-offset: 2px;
}

labelで囲んでクリック範囲を広げる

小さなチェックボックスだけを正確にタップするのは、スマホだと意外と大変です。labelタグでinputとテキストをまとめて囲んでおくと、文字の部分をタップしてもチェックが切り替わるようになります。この記事の見本は、すべてこの構造で作っています。

cursor: pointerを忘れずに

マウスを乗せたときにカーソルが指の形に変わるだけで、押せる場所だと直感的に伝わります。labelとinputの両方にcursor: pointerを指定しておくと親切です。

SANGOでデザインが反映されないときは

当ブログでも使っているSANGOテーマは、フォーム部品にあらかじめきれいなデザインが用意されています。その分、コピペしたCSSがテーマ側のスタイルに負けて、一部のデザインが反映されないことがあります。

反映されないときは、上書きされやすいborder、background、border-radiusの3つに!importantを付けて、優先度を上げてみてください。

/* SANGOで反映されないときの例 */
.cw-check01 input {
  border: 2px solid #27ae60 !important;
  border-radius: 4px !important;
  background: #fff !important;
}

逆にSANGO以外のテーマでは、!importantなしでそのまま反映されるケースがほとんどです。まずはこの記事のコードをそのまま貼ってみて、崩れた部分にだけ足していくのがおすすめです。

なお、CSSの貼り付け先は、管理画面の外観→カスタマイズ→追加CSSが手軽です。追加CSSの使い方や、子テーマなどほかの方法との違いは、WordPressにCSSを追加する方法でくわしく解説しています。

まとめ：用途に合わせて選ぼう

チェックボックスとラジオボタンのカスタマイズを、全10パターン紹介しました。迷ったときは、次の基準で選んでみてください。

  • とにかく手軽に色だけ変えたい → accent-color（見本1）
  • フォームになじむ定番の形にしたい → 見本2〜4、見本7〜8
  • 選択肢をボタンのように目立たせたい → 見本6、見本9〜10

フォームは、入力欄や送信ボタンとセットで整えると統一感がぐっと増します。フォームデザインのコピペ見本集もあわせてどうぞ。

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA



reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

前の記事

【コピペOK】CSSのhover（ホバー）効果デザイン見本14…

次の記事

CSSナビゲーション・ハンバーガーメニュー見本集｜コピペOKな…