Nowadays, building custom checkboxes, radio buttons, and toggle switches is perfectly feasible, while maintaining semantics and accessibility. We don't even need a line of JavaScript code or extra HTML elements! Actually, it's easier lately than in the past. let's see.

The final effect is as follows:

Things are much easier than before!

The reason is that we can finally<input> ::before and ::after pseudo-elements of the tag itself are styled. This means we can keep and set<input> style without any extra elements. Previously, we had to rely on extra<div> or<code><span></span> to implement custom design.

Let's take a look at the HTML code

There is nothing special here. We just need to use this HTML code to style the input:

<input type="checkbox" id="c1">
<input type="radio" id="r1">
<input type="checkbox" id="s1">

This is all about the HTML part. Of course, it is recommended to add name and id attributes, as well as matching ones<label></label> element:

 <label for="c1">Check box</label>
<input type="checkbox" id="c1">

<label for="r1">Radio button</label>
<input type="radio" id="r1">

<label for="s1">switch</label>
<input type="checkbox" id="s1" class="switch">

Start setting styles

First, we check support for appearance: none; including its prefix version. appearance attribute is key because it is designed to remove the browser's default style from the element. If the browser does not support this property, the style will not apply and the default input style will be displayed. This is absolutely fine and is also a good example of gradual enhancement.

 @supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

For now, appearance is still in the working draft phase, but here is the support:

This browser supports data from Caniuse, which contains more details. The number indicates that the browser supports this feature in this and later versions.

Desktop

Mobile/tablet

Like links, we have to consider the different interaction states of form elements. We consider these states when setting element styles:

• :checked
• :hover
• :focus
• :disabled

For example, here is how to style our toggle input, create knobs, and consider :checked status:

 /* Switch container*/
.switch {
  width: 38px;
  border-radius: 11px;
}

/* Switch knob*/
.switch::after {
  left: 2px;
  top: 2px;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  background: var(--ab, var(--border));
  transform: translateX(var(--x, 0));
}

/* Change color and position when selected*/
.switch:checked {
  --ab: var(--active-inner);
  --x: 17px;
}

/* Reduce the opacity of the toggle knob when the input is disabled*/
.switch:disabled:not(:checked)::after {
  opacity: .6;
}

we will<input> Elements are used as containers. The knob inside the input is created with the ::after pseudo-element. Again, no additional marking is needed!

If you open the style in the demo, you'll see that we're defining some CSS custom properties, as this has become a great way to manage reusable values ??in the stylesheet:

 @supports(-webkit-appearance: none) or (-moz-appearance: none) {
  input[type='checkbox'],
  input[type='radio'] {
    --active: #275EFE;
    --active-inner: #fff;
    --focus: 2px rgba(39, 94, 254, .25);
    --border: #BBC1E1;
    --border-hover: #275EFE;
    --background: #fff;
    --disabled: #F6F8FF;
    --disabled-inner: #E1E6F9;
  }
}

But there is another reason we use custom properties - they are very suitable for updating values ??based on the state of an element! We won't go into details here, but the following is an example of how to use custom properties based on different states.

 /* default value*/
input[type='checkbox'],
input[type='radio'] {
  --active: #275EFE;
  --border: #BBC1E1;
  border: 1px solid var(--bc, var(--border));
}

/* Rewrite the default value*/
input[type='checkbox']:checked,
input[type='radio']:checked {
  --b: var(--active);
  --bc: var(--active);
}

/* If not selected and not disabled, another border color is applied when hovering*/
input[type='checkbox']:not(:checked):not(:disabled):hover,
input[type='radio']:not(:checked):not(:disabled):hover {
  --bc: var(--border-hover);
}

For accessibility we should add custom focus styles. We removed the default outline because it cannot be rounded like the rest of the style we set. However, box-shadow with rounded corners can create a rounded corner style that works like an outline.

 input[type='checkbox'],
input[type='radio'] {
  --focus: 2px rgba(39, 94, 254, .25);
  outline: none;
  transition: box-shadow .2s;
}

input[type='checkbox']:focus,
input[type='radio']:focus {
  box-shadow: 0 0 0 var(--focus);
}

You can also align and set directly to follow in HTML<input> Elemental<label></label> Element style:

 <label for="c1">Check box</label>
<input type="checkbox" id="c1">

input[type='checkbox'] label,
input[type='radio'] label {
  display: inline-block;
  vertical-align: top;
  /* Other styles*/
}

input[type='checkbox']:disabled label,
input[type='radio']:disabled label {
  cursor: not-allowed;
}

Show the demo again:

Hopefully you can see how convenient it is to create custom form styles these days. It requires fewer markups due to pseudo-elements directly on form input. It requires fewer style switches due to custom properties. And thanks to @supports it has pretty good browser support.

All in all, this is much better than the development experience we had to deal with in the past!