チェックボックスとラジオボタンの見た目をCSSで変える｜accent-colorとappearance:none、スイッチまでコピペ4種類

お問い合わせフォームのチェックボックスやラジオボタン。何も指定しないと、ブラウザが決めた形と色で表示され、サイトのデザインから少し浮いて見えます。CSSの accent-color と appearance: none を使うと、部品の働きはそのままに、見た目だけをサイトに合わせられます。

使いどころ

色を合わせるだけなら accent-color の1行で済ませる。形まで変えるのは、フォームがサイトの印象を左右する場面だけ。どちらの場合も、本物の input を残し、隠したり作り直したりしない。

今回は、色だけ変える方法、四角とレ点を自分で描くチェックボックス、丸の中に点が入るラジオボタン、オン・オフのスイッチの4種類を、コピペ用のコードつきで紹介します。大きさや枠線の色の目安、キーボード操作や読み上げへの配慮もまとめました。

連載「WEBの技術」の26回目です。
今回はフォームの部品。毎日使うのに、意外と「見た目を変えていいのか」で迷う部分です。

完成見本：見た目を変えた4種類

下の4つは、どれも本物の <input>（入力の部品）に、CSSで見た目を付けたものです。動きが分かるように、見本ではチェックが順番に入ったり外れたりします。

※ 見本は読み上げソフトでは読まれないようにし、キーボードでも止まらないようにしています。端末で動きを減らす設定にしている場合は、切りかわりが止まります。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。クラス名の頭の kd-ck は、サイトのほかのデザインと名前がぶつからないようにするための目印です。1のCSSの前半（まとまりと1行ずつの並べ方）は、2〜4でも使います。

1. 色だけ変える（accent-color）

いちばん手軽な方法です。accent-color（チェックボックスやラジオボタンの「選んだときの色」を決める指定）を、まわりの箱に1行書くだけで、中のチェックボックスとラジオボタンの色がまとめて変わります。形はブラウザが描くので、キーボード操作や読み上げはそのままです。下のCSSの前半（kd-ck-group と kd-ck-item）は、2〜4でも共通で使う、並べ方の指定です。

HTML

<fieldset class="kd-ck-group kd-ck-accent">
  <legend>ご希望の内容</legend>
  <label class="kd-ck-item">
    <input type="checkbox" name="want" value="doc" checked>
    資料を希望する
  </label>
  <label class="kd-ck-item">
    <input type="checkbox" name="want" value="quote">
    見積もりを希望する
  </label>
</fieldset>

CSS

/* 2〜4でも使う：まとまりと、1行ずつの並べ方 */
.kd-ck-group {
  margin: 0;
  padding: 0;
  border: 0;
}
.kd-ck-group legend {
  margin-bottom: 8px;
  padding: 0;
  font-size: 14px;
  font-weight: 700;
  color: #10283A;
}
.kd-ck-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-size: 16px;
  color: #10283A;
  cursor: pointer;
}
.kd-ck-item + .kd-ck-item {
  margin-top: 6px;
}
/* 1：色だけ変える */
.kd-ck-accent {
  accent-color: #0369A1;
}
.kd-ck-accent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
}

2. 四角とレ点を自分で描くチェックボックス

appearance: none（ブラウザが描く見た目を消す指定）で、チェックボックスを空っぽの箱にしてから、枠線と角丸で四角を描いています。レ点は ::before（要素の中に、CSSだけで作る小さな箱）の、右と下の枠線を45度回したものです。:checked（チェックが入っているとき）にだけ、箱を青くしてレ点を出します。

HTML

<fieldset class="kd-ck-group">
  <legend>ほしい資料</legend>
  <label class="kd-ck-item">
    <input class="kd-ck-box" type="checkbox" name="doc" value="pamphlet" checked>
    パンフレット
  </label>
  <label class="kd-ck-item">
    <input class="kd-ck-box" type="checkbox" name="doc" value="price">
    料金表
  </label>
</fieldset>

CSS

.kd-ck-box {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #5A6E7E;
  border-radius: 6px;
  background: #FFFFFF;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
/* レ点：右と下の枠線を45度回す */
.kd-ck-box::before {
  content: "";
  width: 6px;
  height: 12px;
  margin-top: -3px;
  border: solid #FFFFFF;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0);
  transition: transform .15s ease;
}
.kd-ck-box:checked {
  border-color: #0369A1;
  background: #0369A1;
}
.kd-ck-box:checked::before {
  transform: rotate(45deg) scale(1);
}
.kd-ck-box:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kd-ck-box,
  .kd-ck-box::before {
    transition: none;
  }
}

3. 丸の中に点が入るラジオボタン

2と同じく appearance: none で見た目を消し、border-radius: 50% で丸にしています。中の点は、幅と高さが0の ::before に、太さ5pxの枠線を付けて作った丸です。ふだんは scale(0) で小さくしておき、選んだときに大きくします。

HTML

<fieldset class="kd-ck-group">
  <legend>ご希望の時間帯</legend>
  <label class="kd-ck-item">
    <input class="kd-ck-radio" type="radio" name="time" value="am" checked>
    平日の午前
  </label>
  <label class="kd-ck-item">
    <input class="kd-ck-radio" type="radio" name="time" value="pm">
    平日の午後
  </label>
</fieldset>

CSS

.kd-ck-radio {
  appearance: none;
  flex: none;
  display: inline-grid;
  place-content: center;
  width: 24px;
  height: 24px;
  margin: 0;
  border: 2px solid #5A6E7E;
  border-radius: 50%;
  background: #FFFFFF;
  cursor: pointer;
  transition: border-color .15s ease;
}
/* 中の点：太い枠線だけの丸 */
.kd-ck-radio::before {
  content: "";
  width: 0;
  height: 0;
  border: 5px solid #0369A1;
  border-radius: 50%;
  transform: scale(0);
  transition: transform .15s ease;
}
.kd-ck-radio:checked {
  border-color: #0369A1;
}
.kd-ck-radio:checked::before {
  transform: scale(1);
}
.kd-ck-radio:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kd-ck-radio,
  .kd-ck-radio::before {
    transition: none;
  }
}

4. オン・オフのスイッチ

中身はチェックボックスのままで、role="switch"（読み上げソフトに「スイッチ」として伝える指定）を付けています。横長の角丸をレールにして、白い丸のつまみを :checked のときに右へ動かします。つまみも、幅と高さが0の ::before に太い枠線を付けた丸です。

HTML

<label class="kd-ck-item">
  <input class="kd-ck-switch" type="checkbox" role="switch" name="mail">
  お知らせメールを受け取る
</label>

CSS

.kd-ck-switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 28px;
  margin: 0;
  border: 2px solid #7B8A97;
  border-radius: 999px;
  background: #7B8A97;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
/* つまみ：太い枠線だけの丸 */
.kd-ck-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 0;
  height: 0;
  border: 10px solid #FFFFFF;
  border-radius: 50%;
  transition: transform .2s ease;
}
.kd-ck-switch:checked {
  border-color: #0369A1;
  background: #0369A1;
}
.kd-ck-switch:checked::before {
  transform: translateX(20px);
}
.kd-ck-switch:focus-visible {
  outline: 3px solid #0284C7;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .kd-ck-switch,
  .kd-ck-switch::before {
    transition: none;
  }
}

※ コードの上の見本は、比べやすいように切りかわりを止めています。

仕組み：本物の input を残して、見た目だけ変える

accent-color は「選んだときの色」だけを変える

MDNでは、accent-color はチェックボックス、ラジオボタン、スライダー（type="range"）、進み具合のバー（<progress>）の色に使われると説明されています。形や大きさはブラウザが描くので、変えられるのは色だけです。そのかわり、1行で済み、ブラウザが用意している操作や読み上げがそのまま使えます。

注意したいのは、レ点の色です。ブラウザによっては、背景の色に合わせて、レ点を白や黒に自動で切りかえて読みやすくします。ただしMDNの対応表では、Android版Chromeと、Safari 26.2より前は、この自動の調整をしないとされています。そのため、どのブラウザでも白いレ点が読めるよう、#0369A1 のような濃い色を選んでいます（白との明るさの差は約5.9対1）。

appearance: none で、見た目だけを消す

appearance: none を付けると、ブラウザが描いていたチェックボックスの四角や、ラジオボタンの丸が消え、ふつうの箱として扱えるようになります。消えるのは見た目だけです。<input> はそのまま残っているので、スペースキーで切りかえる操作、ラベルを押して選ぶ動き、フォームを送ったときの値、読み上げソフトへの伝わり方は変わりません。

そのあとは、枠線と角丸で箱を描き、:checked（チェックが入っているとき）にだけ色を変えます。レ点や中の点は、::before で作った小さな箱です。::before は、中に何も入れられない <input> にも付けられる、という点がこの方法の支えになっています。

昔の方法との違い

appearance が広く使えるようになる前は、本物の <input> を display: none などで見えなくして、となりの <span> にチェックボックスの絵を描く方法がよく使われていました。この方法は、隠し方によってはキーボードで選べなくなったり、読み上げソフトに部品として伝わらなくなったりします。MDNによると appearance は2022年3月から主要なブラウザで使えるので、今は本物の部品に直接スタイルを当てる形で十分です。

スイッチは「チェックボックス＋role=”switch”」

W3Cの「ARIA in HTML」では、<input type="checkbox"> に role="switch" を付けてよいとされています。付けると、読み上げソフトに「チェックあり・なし」ではなく「オン・オフ」として伝わります。状態は、これまでどおり checked で決まるので、aria-checked を足す必要はありません。

数値を変えるとどうなるか

箱の大きさ

2のチェックボックスの幅と高さだけを変えて並べました。

20px：小さくて押しにくい

24px：目安の大きさ

32px：大きく目立つ

20pxでも見えますが、スマホでは指で押しにくくなります。W3Cのアクセシビリティの基準（WCAG 2.2）では、押す部分は24×24ピクセル以上が目安です。今回の見本は箱を24pxにしたうえで、<label> で文字ごと包み、文字を押しても選べるようにしています。なお、レ点の大きさは決め打ちなので、箱を大きく変えるときは ::before の幅と高さもいっしょに変えます。

枠線の色

チェックが入っていないときの、箱の枠線の色を変えました。

#C9D3DB：1.5対1・見えにくい

#7B8A97：3.5対1

#5A6E7E：5.3対1

うすい灰色の枠線はすっきり見えますが、白い背景との差が約1.5対1しかなく、そこに箱があることが分かりにくくなります。WCAG 2.2では、部品の形を見分けるのに必要な線は、となりの色と3対1以上が目安です。今回は余裕を持って #5A6E7E（白に対して約5.3対1）にしています。

角の丸み

角を丸くしていくと、やわらかい印象になります。ただし50%まで丸めると、チェックが入っていない箱はラジオボタンと同じ形になります。「いくつでも選べる」のか「1つだけ選ぶ」のかが形で分からなくなるので、チェックボックスは四角、ラジオボタンは丸、と分けておきます。

accent-color のあり・なし

指定なし：ブラウザの青

accent-color：サイトの色

左はブラウザが決めた青、右は accent-color: #0369A1 を付けたものです。形は同じで、色だけがサイトの色に変わっています。

変えるところ	小さく・うすくすると	大きく・濃くすると
箱の大きさ（2の 24px）	スマホで押しにくい。レ点もつぶれやすい	目立つが、文字より大きいと並べたときに重たい
枠線の色（2の #5A6E7E）	箱があることに気づきにくい	くっきりして、少しかたい印象になる
角の丸み（2の 6px）	かたい印象	ラジオボタンと見分けにくくなる
切りかわりの時間（2の .15s）	ぱっと変わる	もたついて見え、連続で押すと遅れて感じる

スマホと、見る人への配慮

ラベルで包んで、押せる範囲を広げる

MDNでは、<label> を押すと、つながった入力の部品が操作され、押せる範囲が広がると説明されています。見本のHTMLは、<label> の中に <input> と文字を入れているので、文字を押しても選べます。小さな箱だけを狙って押さなくて済むので、スマホではここがいちばん効きます。

まとまりには fieldset と legend

ラジオボタンのように、いくつかの選択肢で1つの質問に答えるときは、<fieldset>（まとまりの箱）で包み、<legend> に質問を書きます。読み上げソフトでは、選択肢を読む前に「ご希望の時間帯」のような質問が伝わります。

キーボードで選んだときの線を消さない

appearance: none を付けても、キーボードのTabキーで選んだことを示す線は必要です。2〜4のコードでは、:focus-visible（キーボードなどで選んだとき）に、青い線（#0284C7、白に対して約4.1対1）を出しています。

強制カラーモードでも、印が消えないように

Windowsの「コントラストテーマ」のような強制カラーモードでは、MDNの説明どおり、背景の色も枠線の色も、ブラウザが決めた色に置きかえられます。背景の色で描いたレ点は、箱と同じ色になって見えなくなることがあります。そこで今回は、レ点・中の点・スイッチのつまみを、すべて枠線で描いています。Chromeの開発者ツールで強制カラーモードを再現して、印が残ることを確かめています。

色だけで状態を伝えない

4のスイッチは、オンで青、オフで灰色になりますが、色だけでなく、つまみの位置も左右に変わります。色の見分けがつきにくい人にも、位置で状態が分かるようにしておきます。

やりすぎ注意

チェックが入るたびに大きく弾んだり、色が何度も変わったりする演出は、フォームを入力している人の気を散らします。フォームは「早く、迷わず終わらせたい」場所なので、切りかわりは0.2秒前後の短いものにとどめています。

フォームの部品は、見た目をがんばるほど、使う人の「いつもの操作」から離れてしまいがちです。
変えるのは色と形まで。動き方は、ふだんのチェックボックスと同じにしておくのが安心です。

AIに頼むなら

チェックボックスの見た目は、Claudeなどの生成AIに頼むとすぐ作ってもらえます。そのときは「本物のinputを残す」「大きさ」「色」「キーボード操作」まで、まとめて伝えると手直しが少なく済みます。

お問い合わせフォームのチェックボックスを、appearance: none で24pxの角丸の四角にして。
本物の input は隠さず、label で文字ごと包み、チェックが入ったら #0369A1 に白いレ点。
:focus-visible で線を出し、レ点は枠線で描いて、prefers-reduced-motion では動かさないで。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

本物の input を隠していないか。display: none や opacity: 0 で input を見えなくして、となりの span に絵を描く書き方は今でもよく出てきます。キーボードのTabキーとスペースキーで、選んで切りかえられるかを試します
キーボードで選んだときの線が出るか。outline: none だけが書かれていて、代わりの線がないことがあります
枠線がうすすぎないか。おしゃれに見せるために、白い背景に明るい灰色の枠線が選ばれがちです。白との差が3対1以上あるかを確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

ほとんどのフォームは、1の accent-color だけ。お問い合わせや資料請求のフォームは、色がサイトに合っていれば十分です。1行で済み、ブラウザごとの差も小さく、あとから直す人も迷いません
申し込みフォームが「売り場」になっているサイト。イベントの申し込みや予約のように、フォームそのものの印象が大事な場面では、2と3で形までそろえます
設定画面の、すぐに反映されるオン・オフ。会員ページの「お知らせメールを受け取る」のように、押した瞬間に切りかわるものには、4のスイッチが合います

使わない場面

送信ボタンを押して初めて決まる項目に、スイッチ。「利用規約に同意する」のような項目は、ふつうのチェックボックスにします。スイッチは「押したらすぐ切りかわる」と受け取られやすいためです
WordPressのフォームのプラグインが、独自の見た目を持っているとき。プラグインのCSSと重なって、印が二重に出ることがあります。まずはプラグインの設定で色を変えられないかを見ます
選択肢の数が多いアンケート。形を作り込むより、行の間かくや、文字の読みやすさを整えるほうが、答えやすさに効きます

フォームは、サイトの中で「相手に動いてもらう」場所です。
まずは色を合わせるだけにして、形まで変えるのは、フォームが主役のページだけにしています。

まとめ

色を合わせるだけなら、accent-color の1行。レ点が読める濃い色を選ぶ
形まで変えるときは appearance: none。本物の input を残すので、操作や読み上げは変わらない
状態は :checked で切りかえ、レ点や点は ::before で描く。枠線で描くと強制カラーモードでも消えない
スイッチは、チェックボックスに role=”switch” を付ける
箱は24px前後、枠線は背景と3対1以上。label で文字ごと包み、:focus-visible の線を出す

まずは、自分のサイトのCSSに accent-color を1行足してみてください。それだけで、フォームの印象がサイトの色にそろいます。

参考にした資料

いずれも2026年10月27日に確認しました。ブラウザの対応状況は変わることがあります。最新の情報は各ページでご確認ください。

MDN「accent-color」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/accent-color
※チェックボックス・ラジオボタン・range・progress の選んだときの色を決めること。Chrome 93・Firefox 92・Safari 15.4から使えるが、Android版Chromeと Safari 26.2より前は、印の色を自動で読みやすく調整しないため「Limited availability」の表示
MDN「appearance」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/appearance
※none でブラウザが描く部品の見た目を消せること。Baseline Widely available（2022年3月から主要ブラウザで使える）
MDN「:checked」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:checked
※チェックが入ったチェックボックス・選ばれたラジオボタンを選ぶ指定
MDN「<label>」（英語）
https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/label
※ラベルを押すと、つながった入力欄が操作され、押せる範囲が広がること
MDN「forced-colors」（英語）
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/forced-colors
※強制カラーモードでは background-color や border-color がブラウザの決めた色に置きかえられ、box-shadow は消えること
MDN「ARIA: switch role」（英語）
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/switch_role
※switch は checkbox と同じ働きで、状態を「オン・オフ」として伝えること
W3C「ARIA in HTML」（英語）
https://www.w3.org/TR/html-aria/
※<input type=”checkbox”> に role=”switch” を付けてよいこと。その場合 aria-checked ではなく checked を使えること
W3C「Understanding SC 1.4.11 Non-text Contrast」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
※部品の形や状態を見分けるのに必要な部分は、となりの色と3:1以上の明るさの差があること
W3C「Understanding SC 2.5.8 Target Size (Minimum)」（英語）
https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html
※押す部分は24×24 CSSピクセル以上が目安であること