Answers by Sentry

How to style a checkbox using CSS

Matthew C.

The Problem

You have a checkbox or checkboxes that you want to style, such as the following checkbox inputs:

<label>
  <input type="checkbox" name="business" />
  Business
</label>

<label>
  <input type="checkbox" name="economy" checked />
  Economy
</label>

How do you style the checkboxes using CSS?

The Solution

You can change the height, width, and color of a checkbox as follows:

input[type="checkbox"] {
  width: 3em;
  height: 3rem;
  accent-color: green;
}

However, this does not work with Safari, and styling the checkbox directly is limited. To have full control of the styling of a checkbox, you can hide the checkbox input and use the input’s ::before pseudo element to create a custom-styled checkbox.

First, hide the checkbox element:

input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-content: center;
  justify-content: center;
  font-size: 2rem;
  padding: 0.1rem;
  border: 0.25rem solid green;
  border-radius: 0.5rem;
}

Setting the CSS appearance property to “none” hides the checkbox input. The input is made into a flexbox with its contents centered within the set border. This will cause the ::before pseudo-element to be centered within the input container.

Next, create the ::before pseudo-element, which will be the check in the checkbox:

input[type="checkbox"]::before {
  content: "";
  width: 1.4rem;
  height: 1.4rem;
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  transform: scale(0);
  background-color: green;
}

The width, height, and background color are set. We use a clip-path to set which parts of the element should be shown. In this example code, it is shaped as a cross. To make your own clip-path shape, you can use Clippy, which is a clip-path maker.

The cross shape is hidden using the transform CSS property. We scale the size of the pseudo-element to zero to hide it.

To style the checked state, use the :checked CSS pseudo-class selector. When the checkbox is checked, scale the size of the pseudo-element to show it:

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

You can also use the CSS transition property to animate the transform.

To style the hover state, use the :hover CSS pseudo-class:

input[type="checkbox"]:hover {
  color: black;
}

Loved by over 4 million developers and more than 90,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

Try Sentry For FreeRequest a Demo
    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.