...
HTML

How to change the default radio or checkbox button design

21 March 2019

Here I’ll show you how to change default radio or checkbox button design using CSS only.

This is the most easiest method to redesign default structure of radio or checkbox button. For this you can build simple structure of your HTML in the following manner.

And also this approach compatible with almost all browsers. Go through the bellow necessary steps.

Step1: Write your HTML section like this

<form action="#">
  <p>
    <input type="radio" id="test1" name="radio-group" checked>
    <label for="test1">PHP</label>
  </p>
  <p>
    <input type="radio" id="test2" name="radio-group">
    <label for="test2">Javascript</label>
  </p>
  <p>
    <input type="radio" id="test3" name="radio-group">
    <label for="test3">AngularJs</label>
  </p>
</form>

Step2: Write your CSS code like this

[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    color: #666;
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #ddd;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #F87DA9;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}

After implementing above code you can get the desire result for your radio or checkbox buttons.

Output:

Leave a Comments