チェックボックスのスタイル設定

ウェブ機能: accent-color :indeterminate 個別の変換プロパティ マスク

セマンティックでアクセスしやすい HTML を使用し、<label> 内に <input> をネストするか、ラベルの for 属性を入力の id に一致させることで、各チェックボックスをラベルに関連付けます。

最新の CSS には、チェックボックスのスタイル設定に 2 つのアプローチがあります。accent-color を使用してネイティブの外観をカスタマイズする方法と、<input type="checkbox"> 要素の appearance: none を使用してデフォルトの表示をオーバーライドする方法です。

accent-color を使用したネイティブ カスタマイズ

ネイティブ レンダリング、キーボードの動作、検証、オペレーティング システムのフォーカス インジケーターを維持する、シンプルでブランドに一貫したスタイル設定には、accent-color を使用します。

.checkbox-native {
  accent-color: #1a73e8;

  /* Sizing is controlled via relative units */
  inline-size: 1.25em;
  aspect-ratio: 1;
  margin: 0;
  cursor: pointer;
}

appearance: none を使用した完全なカスタム スタイル

appearance: none は、デザインでチェックボックスの形状、サイズ、状態、インジケーターを制御する必要がある場合に使用します。これにより、ネイティブの視覚スタイルが削除され、<input> がインタラクティブなターゲットとして残ります。

appearance: none によってブラウザのデフォルトのサイズが削除されるため、--checkbox-size と --checkbox-icon-size に明示的な相対サイズを設定します。アイコンは、枠線と視覚的なパディングのスペースを確保するため、チェックボックスよりも小さくします。

/* Reusable SVG assets */
:root {
  --icon-check: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'></polyline></svg>");
  --icon-dash: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='4.5' stroke-linecap='round' stroke-linejoin='round'><line x1='5' y1='12' x2='19' y2='12'></line></svg>");
}

/* Custom checkbox */
.checkbox-custom {
  --checkbox-size: 1.25em;
  --checkbox-icon-size: 0.7em;

  appearance: none;
  display: inline-grid;
  place-content: center;
  inline-size: var(--checkbox-size);
  aspect-ratio: 1;
  margin: 0;
  border: 2px solid currentColor;
  cursor: pointer;

  &::before {
    content: "";
    inline-size: var(--checkbox-icon-size);
    aspect-ratio: 1;
    background-color: currentColor;
    mask: var(--checkbox-icon) no-repeat center / contain;
    scale: 0;

    @media (prefers-reduced-motion: no-preference) {
      transition: scale 150ms ease;
    }

    @media (forced-colors: active) {
      background-color: CanvasText;
    }
  }

  &:checked {
    --checkbox-icon: var(--icon-check);
  }

  &:indeterminate {
    --checkbox-icon: var(--icon-dash);
  }

  &:is(:checked, :indeterminate)::before {
    scale: 1;
  }

  &:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
}

不確定状態

不確定状態は HTML 属性では設定できません。JavaScript で indeterminate DOM プロパティを設定し（checkbox.indeterminate = true）、:indeterminate 疑似クラスが :checked 状態とチェックボックスがオフの状態の両方と視覚的に区別できるようにします。

  • ネイティブ（accent-color）: 要素の accent-color を使用してブラウザによって自動的にスタイルが設定されます（追加の :indeterminate CSS ルールは必要ありません）。
  • カスタム（appearance: none）: 上記のように、.checkbox-custom:indeterminate で --checkbox-icon を var(--icon-dash) に入れ替えます。
const selectAll = document.querySelector("#select-all");
selectAll.indeterminate = true;

ユーザー補助と操作

  • カスタム チェックボックスのフォーカス インジケーターのスタイルを設定するには、:focus ではなく :focus-visible を使用します。これにより、キーボード ナビゲーションでは明確なアウトラインが表示され、ポインタのクリックでは表示されなくなります。
  • outline: none を使用したり、チェックボックスのフォーカス インジケーターを非表示にしたりしないでください。

  • 推奨: チェックボックスまたはそれをラップする <label> で、少なくとも 44px x 44px のインタラクティブなヒット ターゲットを提供し、視覚的なチェックボックスのサイズを相対単位で維持します。

    label {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  min-block-size: 44px;
  cursor: pointer;
}

  • 推奨: 不透明度を下げ、cursor: not-allowed を設定して、無効な状態を明確に伝える :disabled スタイル バリアントを提供します。

accent-color を使用する際の注意点

accent-color のブラウザ レンダリングは、ブラウザによって異なります。チェックボックス マークやラジオボタンのドットなど、通常はアクセント カラーの背景に描画されるインジケーターの場合、ブラウザによって異なる処理が適用されることがあります。

  • Chromium と Firefox では、通常、コントラストの高いインジケーターの色が選択されます。
  • Safari では、ライトモードでは白いインジケーター、ダークモードでは黒いインジケーターを維持し、その背後のアクセント カラーを変更する場合があります。この調整では、指定されたすべての色に対して十分なコントラストが得られるとは限らないため、ライトとダークの両方のカラーパターンを含め、重要な組み合わせを Safari でテストしてください。Safari が最適なコントラストを提供するインジケーターの色を自動的に選択するとは限りません。

代替戦略

accent-color のフォールバックとブラウザ サポート

accent-color プロパティはプログレッシブ エンハンスメントです。このプロパティをサポートしていないブラウザでは、このプロパティは無視され、デフォルトの UI カラーが使用されます。

CSS マスク