Sentry Answers>CSS>

How to style a checkbox using CSS

How to style a checkbox using CSS

Matthew C.

The ProblemJump To Solution

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

Click to Copy
<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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
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:

Click to Copy
input[type="checkbox"]:hover { color: black; }
  • Syntax.fmHasty Treat - CSS Grid Masonry (Grid Level 3)
  • Syntax.fmHasty Treat - CSS Grid Level 2 aka Subgrid
  • logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.


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.

© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.