How to style checkbox and radio buttons using CSS

We all agree that the default styles applied to input elements like checkbox and radio aren’t that good. They are also different between browsers. For this reason, we always tend to update the default styles to create our design.

In this post, we will study CSS techniques that allow us to update the style of such elements without extra HTML code. Yes, we are going to give a fresh look to our <input> elements using only CSS!

In this post, I will focus on the CSS part so all the demos will include only the <input> elements for simplicity.

Let’s start with a basic example:

As you can see in the demo, I am not adding any extra HTML code. Only a few lines of CSS are needed.

The first step is to disable the default browser styles using the following code:

input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

Now, we have a “naked” radio button that we can style as we want. What I am doing next is pretty simple. I am giving the checkbox a dimension, a border, and some padding:

input {
  width: 40px;
  height: 40px;
  border: 5px solid grey;
  padding: 5px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor:pointer;   /* don't forget this as well */
}

Then, I am using the :checked pseudo-class to update the style when the element is checked

input:checked {
  background: green content-box;
  border-color: green;
}

I am adding a background that will cover only the content area (thanks to content-box) leaving a gap with the border. I am also giving the border a green color. That’s all!

This basic example illustrates how we can style a radio element without using any extra element. Of course, we will not stop there. We are going to add more CSS to have a better design.

Let’s update the previous example by introducing some CSS variables and transitions:

input {
  --s: 40px;
  
  width: var(--s);
  aspect-ratio: 1; /* OR height: var(--s) for old browsers */
  border: calc(var(--s)/8) solid var(--_c,grey);
  padding: calc(var(--s)/8);
  background: var(--_c,#0000) content-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: .3s;
}
input:checked {
  --_c: green;
}

Instead of setting each property individually, I define one variable (--s) that I use to set the dimension, padding, border, etc. By only adjusting that variable, we can easily control the overall size.

I am doing the same with the coloration. Since the border and background need to be green on checked, I am defining one variable for that purpose.

Let’s consider a more fancy animation

Things start to get more funny! Instead of simply changing the colors, we are having a size animation of the inner part.

To do this, I am using a gradient instead of background color and I am changing the background-size on :checked

input {
  --s: 40px;
  --c: green;
  
  width: var(--s);
  aspect-ratio: 1;
  border: calc(var(--s)/8) solid var(--_c,grey);
  padding: calc(var(--s)/8);
  background: linear-gradient(var(--c) 0 0) 50%/0 0 no-repeat content-box;
  transition:.3s;
}
input:checked {
  --_c: var(--c);
  background-size: 100% 100%;
}

Notice the usage of another variable that allows me to control the color as well.

For the rounded radio button, we need a radial-gradient instead of a linear one

.round {
  border-radius: 50%;
  background: radial-gradient(farthest-side,var(--c) 96%,#0000 ) 50%/0 0 no-repeat content-box;
}

Let’s add an effect to the border:

In addition to the gradient, I am using an outline:

input {
  --s: 40px;
  --c: green;
  
  border: calc(var(--s)/8) solid grey;
  outline: calc(var(--s)/8) solid var(--_c,#0000);
  outline-offset: calc(var(--s)/4);
}
input:checked {
  --_c: var(--c);
  background-size: 100% 100%;
  outline-offset: calc(var(--s)/-8);
  border-color: #0000
}

I am defining an outline equal to the border width. Initially, the outline color is transparent and the offset is a positive value expressed with the variable --s. On :checked, I change the color of the outline, I make the offset negative to create an overlap with the border and I change the color of the border to transparent.

We have a cool radio button with only CSS a stated in the introduction. Not only this, but we can easily adjust things using CSS variables.

Below two more examples to show a full code including custom radio buttons

Thanks to modern CSS techniques we no more need to rely on hacks or a ton of HTML code to create fancy checkbox and radio buttons. All that is needed is the native input element and our creativity to get almost any design we want.

Check out our hosting options. We offer plans for WordPress, cloud hosting, managed cloud servers, and more, all of which can help you ensure your website is built on a strong foundation.