Home/ Questions/Q 3571

Querify Question Shop: Explore Expert Solutions and Unique Q&A Merchandise Latest Questions

Author
  • 61k
Asked: 2024-11-26T03:57:11+00:00

Styling Checkboxes and Switches

  • 61k

I'm probably not the only developer who's frustrated about the browser's default <input type="checkbox">.

First of all: it's not scalable. In this example, the font-size has been scaled up to 200%, but the checkbox remains at it's root size, which is 13.333333px:

Default Checkbox

In this tutorial, we'll be dissecting the browser's default checkbox, and see, if we can do it better.

First, we need to clear the default styling using appearance:none and set an initial size — which will be a relative unit, em:

  [type=checkbox] {   appearance: none;   aspect-ratio: 1;   box-sizing: border-box;   font-size: 1em;   width: 1em; }
Enter fullscreen mode Exit fullscreen mode

The background-color should adapt to dark mode, so we'll check if it matches any of the system colors. It seems to match the Field system-color, so let's use that.

For the border-color — in Chrome — it matches the system color ButtonBorder, but since Safari use a much lighter ButtonBorder, we'll use GrayCanvas which works in both browsers.

We'll add a few CSS Custom Properties, which we'll use to create variants later.

For border-radius and margin, we'll be using the default values, but convert them to the relative unit em.

The border-width seems to scale using this formula:

  (4/3) / root size
Enter fullscreen mode Exit fullscreen mode

Since root size is 13.333333px, we now have:

  [type=checkbox] {   --_bdw: calc(1em * (4/3) / 13.333333);   appearance: none;   aspect-ratio: 1;   background: var(--_bg, Field);   border: var(--_bdw) solid var(--_bdc, GrayText);   border-radius: var(--_bdrs, .2em);   box-sizing: border-box;   font-size: 1em;   margin: var(--_m, .1875em .1875em .1875em .25em);   position: relative;   width: 1em; }
Enter fullscreen mode Exit fullscreen mode

Let's see if it's scalable:

Scalable checkbox

Nice! What about dark mode?

Dark mode

That's why I love system colors! Next, let's add the same hover-effect the browser uses on an unchecked checkbox.

We'll mix-in CanvasText, which is black in light mode, and white in dark mode, and simply update the --_bdc-property we added in the previous step:

  @media (hover: hover) {   &:not(:checked):hover {     --_bdc: color-mix(in srgb, GrayText 60%, CanvasText 40%);   } }
Enter fullscreen mode Exit fullscreen mode

The Checkmark

And now for the checkmark. We could do it with a rotated CSS box in the ::after-element:

  [type=checkbox]::after {   border-color: GrayText;   border-style: solid;   border-width: 0 0.15em 0.15em 0;   box-sizing: border-box;   content: '';   aspect-ratio: 1 / 1.8;   rotate: 40deg;   width: 0.375em; }
Enter fullscreen mode Exit fullscreen mode

Checkmark in CSS

While this works fine, I prefer to use an SVG in a mask, simply because it's more flexible. For that, we'll add a property fot the mask and another, --_bga for the background of the ::after-element, which will be the color of the checkmark.

  [role=checkbox] { --_bga: Field; --_mask: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="3" stroke="%23000" fill="none" stroke-linecap="round" stroke-linejoin="round"> <path d="M5 12l5 5l10 -10"/></svg>');    &::after {     background: var(--_bga, transparent);     content: "";     inset: 0;     position: absolute;     mask: var(--_mask) no-repeat center / contain;     -webkit-mask: var(--_mask) no-repeat center / contain;   } }
Enter fullscreen mode Exit fullscreen mode

So, we do have a checkmark now, we just can't see it, as the mask-color is set to transparent.

Let's update the checkbox's color when clicked, using the :checked-state. But before that, we need to figure out which color!

Safari is the only browser that supports the system color AccentColor, so we need to create out own variable for that, --_accent, which on Mac corresponds to #0075ff:

  [type=checkbox] {   --_accent: #0075ff;   &:checked {     --_bdc: transparent;     --_bg: var(--_accent);     --_bga: Field;   } }
Enter fullscreen mode Exit fullscreen mode

Let's see what we've built:

Checkboxes styled

And dark mode? We need to update the --_accent-property first, since AccentColor isn't working in all browsers yet:

  @media (prefers-color-scheme: dark) {   --_accent: #99C8FF; }
Enter fullscreen mode Exit fullscreen mode

Let's check:

Checkboxes dark mode

Cool! Now all we have to add is the :checked:hover-state, which is similar to the border-hover, we added earlier:

  @media (hover: hover) {   &:checked:hover {     --_bg: color-mix(in srgb, var(--_accent) 60%, CanvasText 40%);   } }
Enter fullscreen mode Exit fullscreen mode

Let's compare how it looks in Chrome, Safari and Firefox:

Browser Compare

Seems we passed the test!

Variants

Creating variants is super-simple: you just need to update a few properties. Example:

  .rounded { --_bdrs: 50%; } .square { --_bdrs: 0; }
Enter fullscreen mode Exit fullscreen mode

And then in HTML:

  <input type="checkbox" class="rounded"> <input type="checkbox" class="square">
Enter fullscreen mode Exit fullscreen mode

Variants

— or go all-in and create oldschool checkboxes:

Old School Checkboxes

A note on round checkboxes: It's bad practice, as you can read in this wonderful article. There are a few exceptions, though, as this “image selector”:

Rounded Image Select

Switches

For switches, we'll add a role="switch", so it's:

  <input type="checkbox" role="switch">
Enter fullscreen mode Exit fullscreen mode

Apple have recently added their own switch-control, but role="switch" is cross-browser. Again, we just need to update a lot of the properties, we created earlier:

  [role=switch] {     --_bdc--hover: transparent;     --_bdrs: 1em;     --_bg: #d1d1d1;     --_bga: Field;     --_mask: none;     aspect-ratio: 1.8 / 1;     border: 0;     display: grid;     padding: .125em;     place-content: center start;     width: 1.8em;     &::after {       border-radius: 50%;       height: .75em;       inset: unset;       position: static;       width: .75em;     }     &:checked {       --_bg: var(--_bg--checked, var(--_accent));       justify-content: end;     }   }
Enter fullscreen mode Exit fullscreen mode

That gives us:

Switches

Demo

And that's it! Below is a Codepen with demos:

Hacks and Stitches

The following is a collection of stuff I've done with checkboxes on Codepen:

Checkbox Cinema

Pick your seats. Can also be modified to pick seats on a train, a plane …

Skyline Checkboxes

Turn on the lights in the flats by clicking the windows …

Paint-By-Numbers

Pick a color first (using <input type="radio">), and then click on the corresponding number (checkboxes) …

Dot-To-Dot

Does not requre JavaScript, but I've left it there for you to play …

Terms and Conditions from Hell

Check them all …

The Daily Toggle

Alvaro Montoro is creating a huge collection of switches/toggles — one per day for 2024. Check them out here.

Cover Photo by Tara Winstead

cssshowdevtutorialwebdev
Share

Leave an answer

You must login to add an answer.

Need An Account,