How to create a custom radio button using HTML and CSS only

In this article, we learn how to create a custom radio button. Hello guys how are you? I hope you all enjoy yourself By now you guys must have read all my articles. And you must have got some help from them all. So in today’s article, we have brought you an article on how to create a custom radio button using HTML and CSS only. So let’s start.


What are radio buttons?

The radio button is a tag of HTML. The radio button helps us in choosing any one of 2 or more options. You will see this mostly on websites while filling a registration form.

Why we need custom radion buttons?

We need to customize the radio button because we have to match our buttons to our design. Apart from this, the very important benefit of customizing the buttons is that we also have to keep the user experience in mind. If you want to show on-off in your design, then you will do that simple HTML buttons on it, then the user will get to see the same boring design. Today people are very serious about website design. So you have to make custom buttons.

How to create a custom radio button

If you want to create a custom radio button, then you have to read this blog carefully. First of all, we will create an HTML file. Then in that file, we will take a label, input tag, and a div/span tag. Span or Div, we will customize and convert it into a radio button. For this, you can also copy the code written below.

  <h1>My custom Radio Button</h1>
    <label for="customRadio" class="myRadio">
        <input type="radio" name="myRadioInput" id="customRadio" class="myRadioClass">
        <div class="myCustomRadio"><!-- wewe --></div> Select it!!!
    </label>

Now we will add CSS to this code so that we can customize our button. For this, you must first create a CSS file or add CSS to the style tag in the same HTML file. Now you can design the label according to your own or copy our design itself. It depends on your design, so we suggest that this label be designed according to you. Now make the input tag display non because we do not show it. Now design the div as per your liking.

*{margin: 0;padding: 0; box-sizing: border-box;}
        body{font-family: 'Poppins', sans-serif; font-size: 16px; letter-spacing: 1px; line-height: 24px;}
        h1{padding: 1em; text-align: center;}
        .myRadio{display: inline-flex;align-items: center; cursor: pointer; margin-right:10px ;}
        .myRadioClass{display: none;}
        .myCustomRadio{width: 1.25em;height: 1.25em; border: 2px solid #cccccc;border-radius: 50%;margin-right: 10px; padding: 2px; transition: transform 0.15s}
        .myCustomRadio::after{content: "";width: 100%; height: 100%; display: block; background: tomato; border-radius: 50%;  transform: scale(0);}
        .myRadioClass:checked + .myCustomRadio:after{transform: scale(1);}
Custom radio button
Custom radio button

Now you have to set the div according to your design. Meaning that you have to make your button design, you can make anything. Like we made Div a circle. You can make it a rectangle. After this, you have to set the after section of this div. In it, you have to make the radio button selection part. So we have made a circle. As soon as the user clicks on it, it will appear as a circle selection. Now we will set this at the click of the radio button, for that you will need the help of Sibling Selector.

Now you have to set the div according to your design. Meaning that you have to make your button design, you can make anything. Like we made Div a circle. You can make it a rectangle. After this, you have to set the after section of this div. In it, you have to make the radio button selection part. So we have made a circle. As soon as the user clicks on it, it will appear as a circle selection. Now we will set this at the click of the radio button, for that you will need the help of Sibling Selector. You can also copy the code.

Your custom radio button is ready. If you have any problem related to this topic, please write in the comment section below and tell us what is the problem.
There are many advantages to creating custom radio buttons.

  1. This will not make your site look different
  2. Buttons on your site will be according to your requirement.
  3. The user will never be confused about what to do

whenever you create a site, you must customize your radio buttons. Hope you like the article. If you want to see more similar tricks, you can visit our home page. See you now with a new article. If you want the code of any topic or tutorial related to it, then you can tell us by commenting.

Leave a Comment