Web features: [accent-color](https://webstatus.dev/features/accent-color) [:indeterminate](https://webstatus.dev/features/indeterminate) [Individual transform properties](https://webstatus.dev/features/individual-transforms) [Masks](https://webstatus.dev/features/masks) > [!NOTE] > **Note:** These guides are authored for AI coding agents (apologies for the robotic tone!). To have your coding agent adopt these patterns automatically, check out [Modern Web Guidance](https://github.com/GoogleChrome/modern-web-guidance). Use semantic, accessible HTML with each checkbox associated with its label, either by nesting the `` inside the `` or by matching the label's `for` attribute to the input's `id`. Modern CSS provides two approaches to styling checkboxes: customize the native appearance with `accent-color`, or override the default presentation with `appearance: none` on the `` element. ## Native customization with `accent-color` For simple, brand-consistent styling that retains native rendering, keyboard behavior, validation, and operating-system focus indicators, use `accent-color`. ```css .checkbox-native { accent-color: #1a73e8; /* Sizing is controlled via relative units */ inline-size: 1.25em; aspect-ratio: 1; margin: 0; cursor: pointer; } ``` ## Fully custom styling with `appearance: none` Use `appearance: none` when the design requires control over the checkbox's shape, size, states, or indicators. This removes the native visual styling while leaving the `` as the interactive target. Set explicit relative sizes for `--checkbox-size` and `--checkbox-icon-size` because `appearance: none` removes the browser's default dimensions. Keep the icon smaller than the checkbox to provide space for its border and visual padding. ```css /* Reusable SVG assets */ :root { --icon-check: url("data:image/svg+xml;utf8,"); --icon-dash: url("data:image/svg+xml;utf8,"); } /* 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; } } ``` ## The indeterminate state The indeterminate state cannot be set via an HTML attribute; set the `indeterminate` DOM property in JavaScript (`checkbox.indeterminate = true`) and ensure the `:indeterminate` pseudo-class is visually distinct from both `:checked` and unchecked states: - **Native (`accent-color`):** Automatically styled by the browser using the element's `accent-color` (no extra `:indeterminate` CSS rule needed). - **Custom (`appearance: none`):** Swap `--checkbox-icon` to `var(--icon-dash)` on `.checkbox-custom:indeterminate` as shown above. ```javascript const selectAll = document.querySelector("#select-all"); selectAll.indeterminate = true; ``` ## Accessibility and interaction - **DO** use `:focus-visible` rather than `:focus` to style focus indicators on custom checkboxes so a distinct outline appears for keyboard navigation without showing on pointer clicks. - **DO NOT** use `outline: none` or hide focus indicators on checkboxes. - **DO** ensure the contrast of focus indicators has a contrast of at least `3:1` with the background color - **DO** ensure the color for the checked and indeterminate state has a contrast of at least `3:1` with the background color - **DO** ensure the checkbox or its wrapping `` provides an interactive hit target of at least `44px x 44px` while keeping the visual checkbox box sized in relative units: ```css label { display: inline-flex; align-items: center; gap: 0.65rem; min-block-size: 44px; cursor: pointer; } ``` - **DO** provide a `:disabled` style variant that lowers opacity and sets `cursor: not-allowed` to convey inactive states clearly. ### Issues to be aware of when using accent-color Browser rendering of `accent-color` varies. For indicators generally painted over an accent color background, such as checkbox marks and radio-button dots, browsers may apply different treatments: - **Chromium** and **Firefox** generally select a contrasting indicator color. - **Safari** may instead preserve a white indicator in light mode or a black indicator in dark mode, while modifying the accent color behind it. This adjustment does not always provide sufficient contrast for every supplied color, so test important combinations in Safari, including both light and dark color schemes. Do not assume that Safari will automatically choose whichever indicator color provides the best contrast. ## Fallback strategies ### Fallbacks \& browser support for accent-color The `accent-color` property is progressive enhancement. Browsers that do not support this property will ignore it and use their default UI colors. ### CSS Masks Source: [checkbox guide on GitHub](https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/guides/ui-components/checkbox/guide.md)