Tools Blog

Checkbox Style Generator

Scan to open this page

The native checkbox is hidden with opacity:0, not display:none — verified directly that display:none removes it from the keyboard tab order entirely.

Generate a custom-styled checkbox that hides the native input with opacity:0, not display:none — verified directly that display:none removes a checkbox from the keyboard tab order entirely (a .focus() call on it silently fails), while opacity:0 keeps it fully keyboard- and screen-reader-accessible. Includes :focus-visible and :indeterminate styling by default.

How it works

  1. Pick a style, color, and size — the live preview updates instantly
  2. Tab to the preview checkbox with your keyboard and press Space — it works, because the native input stays focusable
  3. Copy the HTML + CSS, which always hides the input with opacity:0

Frequently asked questions

Why opacity:0 instead of display:none?

We tested it directly: a checkbox hidden with display:none can't receive keyboard focus at all — document.activeElement never changes even when .focus() is called on it. opacity:0 (with positioning) keeps the checkbox fully focusable and operable by keyboard, while staying visually hidden.

What's the indeterminate state?

A third visual state meaning "partially selected" — commonly used for a parent checkbox when only some of its children are checked. This tool's generated CSS styles it by default; toggle the preview to see it.

Is the code sent to a server?

No — generation runs entirely in your browser.

#CustomCheckboxGenerator#CssCheckboxGeneratorAccessible#CustomCheckboxKeyboardFocusNotWorking#CheckboxDisplayNoneAccessibilityBug#CssCheckboxIndeterminateState

Related tools

HEX to RGBA Converter HEX to RGBA Converter Switch/Toggle Generator Switch/Toggle Generator

From the blog

One CSS property choice decides whether keyboard users can check your custom checkbox at all
color-css

One CSS property choice decides whether keyboard users can check your custom checkbox at all

We hid a checkbox with display:none and called .focus() on it. Nothing happened. We did the same with opacity:0. It worked. That's the whole difference between an accessible custom checkbox and a broken one.

2026-08-30

Update history

  • 2026-08-30 Added: a link to the new Switch/Toggle Generator cube (same accessibility principles, applied to sliding toggle switches).
  • 2026-08-30 Added: a cover image (a solid checkbox connected to a keyboard key by a solid line, and a faded ghost checkbox connected by a dashed line with an X) — used as the card thumbnail, social share image, and blog title image.
  • 2026-08-30 Launched: live checkbox style generator (no button) — 4 styles with color/size controls, always hiding the native input with opacity:0 instead of display:none (verified directly that display:none breaks keyboard focus entirely), with :focus-visible and :indeterminate styling included by default. Entirely client-side.