Softonic

CSS Checkbox Generator

Step 1 / 2
Results

Default checkboxes look different on every operating system and are hard to restyle. This generator creates pure CSS that gives a native checkbox the look you want: pick the color of the checked state, the border color, the size and the corner radius. Because the style is applied to a real input, keyboard operation, screen readers and form submission keep working. Copy the generated CSS and add it to your stylesheet.

How to style a checkbox

  1. 1

    Choose the colors

    Pick the background color for the checked state and the border color of the box.

  2. 2

    Set the size

    Choose a size between 12 and 48 px.

  3. 3

    Set the shape

    Choose the corner radius of the box, up to 20 px.

  4. 4

    Copy the CSS

    Preview the checkmark and copy the generated rule into your stylesheet.

What the generated CSS does

The rule is applied directly to the input with appearance: none, which removes the default look so the box can be styled:

.checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: all 0.15s ease;
}

When the checkbox is checked, the box fills with the chosen color and a white checkmark appears, drawn with CSS:

.checkbox:checked {
  background: #10b981;
  border-color: #10b981;
}
.checkbox:checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 2px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

Why a native input

The style never replaces the element with a div: the real <input type="checkbox"> keeps its keyboard activation, screen-reader support and form submission. appearance: none only changes how it looks. If you need to support older Safari versions, add -webkit-appearance: none to the rule.

Focus and hover

The generated rule includes a smooth color transition but no hover or focus styles. Add your own rules for :hover and :focus-visible so keyboard users always see where the focus is, for example a colored outline around the box.

The checkmark

The checkmark is a small white border rotated 45 degrees. If you need another color or a thinner or thicker tick, edit the border and border-width values in the ::after rule.

Frequently Asked Questions

No. It outputs CSS only. Apply the class to a real input in your form, with or without a visible label.

Yes. The rule uses appearance: none on the native input, so the value is submitted normally and keyboard and screen-reader support stay intact.

The size is a control in the generator, from 12 to 48 px. The checkmark color and thickness are edited in the ::after rule of the generated CSS.

For touch targets, aim for at least 24 px, ideally 44 px like other controls. Keep the box aligned with the label text in your design.

Related Tools

ASCII Table Reference

Full ASCII table from 0 to 127 with decimal, hex, octal, binary, standard names and HTML numeric-reference notation, including NUL, LF and DEL.

Color Palette Generator

Generate monochromatic, analogous, complementary, triadic or tetradic color palettes from a base HEX color and export copy-ready CSS variables.

HEX Color Picker

Pick or enter a HEX colour and get RGB, HSL, approximate CMYK, relative luminance and contrast ratios against white and black.

HTML Character Reference

Searchable list of HTML entities, their named and numeric codes, and a one-click copy for special characters and symbols.

JSON Formatter

Paste JSON to pretty-print with 2 or 4 spaces, minify it to compact output, or run a quick syntax check before copying the result.

Phone Validator

Validate phone numbers by country, detect the region and type, and normalize valid numbers to E.164, international, national and RFC 3966 formats.

Tool available in other languages