Matthew C.
—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?
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; }
Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.
SEE EPISODESConsidered “not bad” by 4 million developers and more than 100,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.
Here’s a quick look at how Sentry handles your personal information (PII).
×We collect PII about people browsing our website, users of the Sentry service, prospective customers, and people who otherwise interact with us.
What if my PII is included in data sent to Sentry by a Sentry customer (e.g., someone using Sentry to monitor their app)? In this case you have to contact the Sentry customer (e.g., the maker of the app). We do not control the data that is sent to us through the Sentry service for the purposes of application monitoring.
Am I included?We may disclose your PII to the following type of recipients:
You may have the following rights related to your PII:
If you have any questions or concerns about your privacy at Sentry, please email us at compliance@sentry.io.
If you are a California resident, see our Supplemental notice.