Days on the Moon

HTMLのチェックボックス（<input type="checkbox">）やラジオボタン（<input type="radio">）をCSSで装飾したいというのはよく聞く話です。2024年現在は、HTMLの記述は簡単なまま、CSSで自由度の高い装飾も実現できるようになっています。

1. 結論
2. 従来の手法
3. appearanceプロパティを使う手法
4. 外枠の配置
5. 未チェックとチェック済みの切り替え
6. 強制カラーモードへの対応
   1. 透明なボーダーやアウトライン
   2. 内向きの影や背景グラデーション
   3. 画像やテキスト
   4. ブラウザ組み込みの外観
7. 状態に応じたスタイルの指定
8. 参考文献

結論

単に色調を整えられればよいという場合は、accent-colorプロパティを使います。

input[type="checkbox"], input[type="radio"] {
  accent-color: #d31;
}

accent-colorプロパティは継承するので、body要素などに指定してその子孫のフォームコントロールに一律に適用することもできます。

自由に装飾したい場合は、input要素にappearance: noneを指定したうえで、未チェック状態とチェック済み状態のスタイルを指定していきます。::before、::after疑似要素も使えます。

input[type="checkbox"] {
  -webkit-appearance: none; /* Safari 15.3以下のため */
  appearance: none;
  border: thin solid;
}
input[type="checkbox"]::before {
  content: '✔';
  visibility: hidden;
}
input[type="checkbox"]:checked::before {
  visibility: visible;
}

従来の手法

これまでチェックボックスやラジオボタンをCSSで装飾したい場合は、input要素自身ではなくその直後に置いたspan要素やlabel要素を装飾するのが一般的でした。

<label>
  <input type="checkbox">
  <span>...</span>
</label>

<input id="the-radio-1" type="radio">
<label for="the-radio-1">...</label>

/* 組み込みのチェックボックスとラジオボタンを見えなくする */
input[type="checkbox"], input[type="radio"] {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

input[type="checkbox"] + span { /* 未チェック状態のスタイル */ }
input[type="checkbox"]:checked + span { /* チェック済み状態のスタイル */ }
input[type="radio"] + label { /* 未チェック状態のスタイル */ }
input[type="radio"]:checked + label { /* チェック済み状態のスタイル */ }

この手法は、スタイル指定のためだけのspan要素が必要となる、あるいはinput要素にid属性を指定して明示的にlabel要素と紐づける必要があるという点で、ひと手間かかります。また、アクセシビリティを確保するため、input要素を見えなくするのにはdisplay: none以外の手段を使う必要があります（display: noneを使うと、チェックボックスやラジオボタンをキーボードで操作できなくなります）。

appearanceプロパティを使う手法

appearanceプロパティを使う場合、HTML側ではlabel要素とinput要素の暗黙的な紐づけを使えます（明示的な紐づけを使っても構いません）。

<label>
  <input type="checkbox">
  ...
</label>

CSS側ではappearance: noneを指定します。これにより、input要素が組み込みのチェックボックスやラジオボタンではなく、単なる「内容が空の要素」として描画されることになります。<span></span>と同じ扱いができるので、背景、ボーダー、影、アニメーション、それに::before、::after疑似要素といったCSSの各種機能をふんだんに使って装飾できます。

外枠の配置

appearance: noneを指定しただけでは内容が空なので何も表示されません。まずは幅と高さを指定してチェックボックスまたはラジオボタンの領域を確保しましょう。幅と高さの指定が確実に効くようにするため、displayプロパティにinline-block、inline-grid、inline-flexなどの値を指定する必要があります。

input[type="checkbox"] {
  -webkit-appearance: none; /* Safari 15.3以下のため */
  appearance: none;
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
}

そのままだとブラウザ組み込み（ユーザーエージェントスタイルシート）のスタイルが残ることがあるので、適宜初期化していきます。ブラウザごとの差異を吸収するため、マージンと背景色は常に指定したほうがよいでしょう。em単位を使うのならfont-sizeプロパティを、親要素と同じフォントや文字色（あるいはcurrentcolorキーワード）を使うのならfont-familyプロパティやcolorプロパティを、それぞれ継承させます。

input[type="checkbox"] {
  ...
  margin: 0;
  background-color: transparent;
  color: inherit;
  font: inherit;
}

また、気をつけておきたいのが行内での縦位置です。個人的には、チェックボックスおよびラジオボタンの縦中央と、ラベル文字列の縦中央とがそろったほうが収まりがよく感じられます（vertical-align: middleは英小文字の縦中央とそろえるので、日本語文字の縦中央とは少しずれますが……）。

input[type="checkbox"] {
  ...
  vertical-align: middle;
}

外枠の仕上げとしてボーダーを指定します。ラジオボタンの場合はborder-radiusプロパティで円形にするのがわかりやすいでしょう。ボーダーではなく背景画像やグラデーションで外枠を表現することもできます。後述する強制カラーモードへの対応のため、背景画像を使わないときはボーダーを指定することをお勧めします（border: thin solid transparentといった透明のボーダーでも構いません）。

input[type="checkbox"], input[type="radio"] {
  ...
  border: thin solid;
}
input[type="checkbox"], input[type="radio"] {
  ...
  border-radius: 0.2em;
}
input[type="radio"] {
  ...
  border-radius: 50%;
}

ここまでの指定を適用したのが以下の例です。

未チェックとチェック済みの切り替え

外枠ができたら次は内側、チェック状態の切り替えを表現していきましょう。::before疑似要素でチェック済みを表す内容を指定しつつ最初は隠しておき、チェック済み状態（:checked疑似クラス）になったらその内容を表示するというパターンが多いです。

以下の例では、ボーダーを使ってチェックボックスのチェックマークとラジオボタンの点を描画しています。ボーダーを使っているのは、後述する強制カラーモードでもチェックマークや点が表示されるようにするためです。また、内容を上下左右とも中央ぞろえするためにグリッドレイアウトを使っています。

input[type="checkbox"],
input[type="radio"] {
  ...
  display: inline-grid;
  place-content: center;
}
input[type="checkbox"]::before {
  content: '';
  width: 0.7em;
  height: 0.3em;
  border-left: 0.3em solid;
  border-bottom: 0.2em solid;
  transform: translateY(-0.1em) rotate(-40deg);
  visibility: hidden;
}
input[type="checkbox"]:checked::before {
  visibility: visible;
}
input[type="radio"]::before {
  content: '';
  border: 0.4em solid;
  border-radius: 50%;
  visibility: hidden;
}
input[type="radio"]:checked::before {
  visibility: visible;
}

clip-pathプロパティを使って好きな形に切り抜いたり、背景画像やボーダー画像にグラデーションを使ったりと、自由度の高い表現が可能です。

input[type="checkbox"]::before {
  content: '';
  border: 0.5em solid;
  clip-path: polygon(0% 60%, 0% 45%, 35% 65%, 100% 0%, 100% 15%, 45% 100%, 30% 100%);
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 1em;
  height: 1em;
  border: 0.2em solid transparent;
  border-radius: 50%;
  padding: 0.2em;
  background:
    repeating-conic-gradient(from 45deg, #f33 0deg 90deg, #fc6 90deg 180deg) content-box,
    repeating-conic-gradient(from 45deg, #fc6 0deg 90deg, #f33 90deg 180deg) padding-box,
    repeating-conic-gradient(from 45deg, #f33 0deg 90deg, #fc6 90deg 180deg) border-box,
    CanvasText;
  visibility: hidden;
}

チェック状態の切り替え時に、フェードイン・フェードアウトや拡大・縮小といったアニメーション効果をつけるのもよいでしょう。

input[type="checkbox"]::before {
  ...
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
input[type="checkbox"]:checked::before {
  opacity: 1;
}

input[type="radio"]::before {
  ...
  scale: 0;
  transition: scale 0.5s ease-out;
}
input[type="radio"]:checked::before {
  ...
  scale: 1;
}

強制カラーモードへの対応

強制カラーモードとは、テキストを読みやすくするために、背景色や文字色をコントラストのはっきりした色にする機能のことです。OSのアクセシビリティ機能の一環として提供されることが多く、Windowsなら「ハイコントラスト（Windows 10）」「コントラストテーマ（Windows 11）」という設定を有効にすることで、ブラウザで表示中の文書でも強制カラーモードが有効化されます。

強制カラーモードの主な影響は以下の通りです。詳しくはforced-colorsメディア特性を参照してください。

• color、background-color、border-color、outline-color、accent-colorなどは、OSやブラウザ側で決められた色に変更されます。
• text-shadow、box-shadowは無視されます。
• background-image: linear-gradient(...)などのグラデーションの指定は無視されます。

一般的なテキストと画像に関しては、強制カラーモードを意識せずにスタイルを指定していても、最低限テキストが読める状態になることが多いです。しかし、カスタマイズしたチェックボックスやラジオボタンに関しては、気をつけないと全く表示されず、ユーザーがそれらフォームコントールの存在に気づかないという事態が起こりかねません。

チェック状態に関しても、チェックマークや点を単純にbackground-color: #d51のような背景色だけで表現してしまうと、強制カラーモードではチェック済みかどうか視認できなくなってしまいます。前述のボーダーを使った表現や、または以下に挙げるような表現手法をとる必要があります。

透明なボーダーやアウトライン

背景部分に透明なボーダーやアウトラインを重ねる手法です。強制カラーモードが無効なときは背景がそのまま表示されますし、有効なときはボーダーやアウトラインが塗りつぶされて視認できます。背景部分にアウトラインを重ねるためには、outline-offsetプロパティの値に負数を指定してボックスの内側にアウトラインを配置します。

input[type="checkbox"]::before {
  content: '';
  border: 0.4em solid transparent;
  background-color: #d31;
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background-color: #d31;
  outline: 0.4em solid transparent;
  outline-offset: -0.4em;
  visibility: hidden;
}

内向きの影や背景グラデーション

CanvasText（文書の文字色を示す）といったシステム色は、強制カラーモードでも視認できる背景色として使えます。内向きの影（box-shadow: inset ...）は背景の前面に描画されるため、強制カラーモードが無効なら影の色が表示されますが、有効だと背景色が表示されることになります。背景画像としてグラデーションを使った場合も、そのグラデーションは背景色の前面に描画されます。

input[type="checkbox"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  background-color: CanvasText;
  box-shadow: inset 0 0 0 0.4em #d31;
  visibility: hidden;
}
input[type="radio"]::before {
  content: '';
  width: 0.8em;
  height: 0.8em;
  border-radius: 50%;
  background: linear-gradient(#d31 0% 100%), CanvasText;
  visibility: hidden;
}

画像やテキスト

background-image: url(...)やcontent: url(...)で読み込んだ画像、およびcontentプロパティで指定したテキストは、強制カラーモードでもそのまま表示されます。

input[type="checkbox"]::before {
  content: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cpath%20d%3D%22M%205%2C1%20L%209%2C5%205%2C9%201%2C5%20Z%22%20fill%3D%22%23fda%22%20stroke%3D%22%23f81%22%2F%3E%3C%2Fsvg%3E");
  width: 1.2em;
  height: 1.2em;
  visibility: hidden;
}
input[type="radio"] {
  ...
  display: inline-block;
  text-align: center;
}
input[type="radio"]::before {
  content: '';
  display: block;
  margin-top: -0.2em;
}
input[type="radio"]:checked::before {
  content: '👉';
}

ブラウザ組み込みの外観

強制カラーモードではカスタマイズせずに、ブラウザ組み込みの外観を使うのもひとつの手です。forced-colorsメディア特性で強制カラーモードが有効かどうかを判別でき、allプロパティとrevertキーワードの組み合わせでスタイル指定を撤回できます。

@media (forced-colors: active) {
  input[type="checkbox"],
  input[type="checkbox"]::before,
  input[type="radio"],
  input[type="radio"]::before {
    /* 疑似クラスに指定されたスタイル（後述）も撤回したいので!importを指定する。 */
    all: revert !important;
  }
}

ここまで書いておいてなんですが、筆者は強制カラーモードを常用しておらず、強制カラーモードでチェックボックスやラジオボタンをカスタマイズしてもよいのかしないほうがよいのかのベストプラクティスを持ち合わせていません。ご存じの方は教えていただけると幸いです。

状態に応じたスタイルの指定

以上で最低限の表示切替ができましたが、ほかにも状態に応じたスタイルを指定できます。

よく使うのはマウスホバー時を表す:hover疑似クラスでしょう。フォームコントロールに対する:hover疑似クラスは、そのフォームコントロールに紐づけられたlabel要素にマウスホバーしているときにも適用されます。

次の例では:hover疑似クラスと:enabled疑似クラスを組み合わせています。:hover疑似クラスを使うのは「今まさにユーザーが操作できる対象を強調したい」という意図であり、無効状態の（操作できない）フォームコントロールに適用してしまうとその意図から外れてしまうからです。

input[type="checkbox"]:enabled:hover,
input[type="radio"]:enabled:hover {
  box-shadow: 0 0 0.3em 0.1em #d31;
}

多くのブラウザでは、チェックボックスやラジオボタンにキーボード（Tabキー）でフォーカスしたときに、フォーカスリングが表示されます。このフォーカスリングの表示を変更したいときには:focus-visible疑似クラスを使います。その際には「アクセシビリティの考慮」の項やWCAG 2.1の達成基準1.4.11「非テキストのコントラスト」の解説も参考に、「今まさにユーザーが操作できる対象」が伝わるようにしてください。

以下の例では、影を使ってフォーカスリングを表現しつつ、強制カラーモードに備えて透明のアウトラインを設定しています。単にoutline-color: transparentを指定するだけ（outline-style: autoのまま）だとブラウザによってはアウトラインが見えてしまうことがあるので、outline-style: solidにしています。

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
  box-shadow: 0 0 0.3em 0.1em #d31;
  outline: medium solid transparent;
}

無効状態の（disabled属性が付与された）チェックボックスやラジオボタンを提供するのなら、:disabled疑似クラスを使います。次の例ではfilterプロパティを使って無彩色にしたうえで、opacityプロパティで色を薄くしています。強制カラーモードで背景が明色になろうと暗色になろうと、半透明なら色が薄くなることに変わりありません。

input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  border-style: dashed;
  filter: grayscale(1);
  opacity: 0.6;
}

チェックボックスには未チェックともチェック済みとも言えない未決定状態が存在します。ただし、未決定状態になるのはJavaScriptでinput要素オブジェクトのindeterminateプロパティを設定したときだけです。そのようなJavaScriptの記述がなければ、未決定状態に対するスタイルを指定する必要はありません。そのような記述があるのなら、:indeterminate疑似クラスを使ってスタイルを指定します。

以下の例では「くだもの」グループに属すチェックボックスの一部のみがチェックされているときに、「くだもの」チェックボックスを未決定状態にしています。

input[type="checkbox"]:indeterminate::before {
  width: 0.5em;
  height: 0.5em;
  border: 0.2em dotted;
  transform: none;
  visibility: visible;
}

参考文献

チェックボックスとラジボタンのカスタマイズについて:

• Xユーザーのしゃろさん: 「<input type="radio"> や <input type="radio"> を独自にスタイリングするために、次の3つを使用していた。 - いわゆる visually hidden なスタイル - 隣接する label/div/span 要素、または、それらの疑似要素 ::before/::after - 隣接セレクタ + と擬似クラス :checked」 / X
  この記事を書くきっかけとなったツイート。返信中に記載された例では、行内での縦位置を揃えるためlabel要素にdisplay: inline-flexを指定している。
• Pure CSS Custom Styled Radio Buttons | Modern CSS Solutions
  ラジオボタンの装飾方法について。強制カラーモードへの対応や:focus-within疑似クラスを用いたラベルのスタイル指定など。
• Pure CSS Custom Checkbox Style | Modern CSS Solutions
  チェックボックスの装飾方法について。clip-pathプロパティを用いたチェックマークの作成など。
• One last time: custom styling radio buttons and checkboxes | scottohara.me
  チェックボックスとラジオボタンの装飾方法について。双方向書字やダークモードなどでの確認を勧める。
• Custom Styling Form Inputs With Modern CSS Features | CSS-Tricks - CSS-Tricks
  チェックボックスとラジオボタンの装飾方法について。トグルスイッチの例など。

強制カラーモードについて:

• アクセシビリティを高めるための、コントラストテーマの基本対応 | 株式会社ヌーラボ(Nulab inc.)
  WindowsのコントラストテーマとBacklogでの対応事例。

この記事はCSS Advent Calendar 2022の9日目の分です。

---

CSSのボックスモデルにおいては、ボーダーの内辺とパディングの外辺の間にスクロールバーが配置されます。最近はどのOSでもオーバーレイスクロールバー（スクロールバーが内容の前面に覆いかぶさるようなもの）が主流となり、スクロールバーが存在してもしなくても内容の幅が変わらないようになっています。一方、クラシックスクロールバー（スクロールバーが常に表示されるようなもの）が使われる環境では、overflow: autoな要素において内容がはみ出すときとはみ出さないときで内容の幅が変わってきます。

クラシックスクロールバーが使われる環境でも内容の幅を一定に保ちたいという場合は、scrollbar-gutterプロパティを使います。scrollbar-gutter: stableを指定すれば、スクロールバーが表示されないときでもスクロールバーと同じだけの領域が確保され、内容の幅はその分狭くなります。左右中央に配置したいのにスクロールバーの領域の分だけずれて困るというときは、scrollbar-gutter: stable both-edgesを指定することで、左右どちらにもスクロールバーと同じだけの領域が確保されます。

（上図はWindows 10 Firefox nightly 109.0a1での表示）

scrollbar-gutterプロパティはoverflow: hiddenな要素にも適用されますが、overflow: visibleな要素には適用されません。また、scrollbar-gutterプロパティの効果は、縦スクロールバー（縦書きなら横スクロールバー）にのみ影響します。

オーバーレイスクロールバーが使われる環境では、scrollbar-gutter: stableの効果はありません。

使用事例

使用事例としては、@about_hiroppyさんの紹介している「HTMLのdialog要素によるモーダルダイアログが開いているときに、背景の文書をスクロールさせない」というのが考えられます（scrollbar-gutterプロパティを指定した例と指定しなかった例）。

html {
  scrollbar-gutter: stable;
}
html:has(dialog:modal) {
  overflow: hidden;
}

クラシックスクロールバーが使われる環境では、文書をスクロールさせないためにoverflow: hiddenを指定すると、スクロールバーが消えて文書の内容ががたついてしまいます。scrollbar-gutter: stableをあらかじめ指定しておけば、スクロールバーが消えてもその分の領域が確保され続けるので、文書の内容ががたつきません。