Create Custom CSS Radio Buttons

Turn your radio buttons into attractive labels

Sristi Chowdhury

Published in

JavaScript in Plain English

3 min readMay 29, 2021

My objective for this article will be to create attractive labels with the same functionality as CSS radio buttons.

So, join me in designing the radio buttons!

Let’s begin with the creation of the HTML file ~ index.html.

Paste this code in the body section of your HTML file.

<body>
<div class="content">
  <div class="radio-toolbar">
    
<input type="radio" id="eat" name="val" value="Eat" checked/>
<label for="eat">Eat</label><input type="radio" id="sleep" name="val" value="Sleep"/>
<label for="sleep">Sleep</label><input type="radio" id="code" name="val" value="Code"/>
<label for="code">Code</label><input type="radio" id="repeat"  name="val" value="Repeat"/>
<label for="repeat">Repeat</label> 
  </div>
</div>
</body>

This is how the radio buttons currently look!

Let’s add some creative magic to these and make them look more attractive.

First, let us add some colour to the background. For this, I will be using a basic background image from Google.

Find the image here.

Here is the CSS code

Add it to your stylesheet and you will see the above result!

.content
{
  background:url('https://dm0qx8t0i9gc9.cloudfront.net/thumbnails/video/rN0W64K4ipau8gxv/videoblocks-simple-graphic-background-in-pastel-shades_bihmovigu_thumbnail-1080_01.png');
  height:50vh;
  padding:100px;
  background-size:cover
}.radio-toolbar
{
  background-color:white;
  width:30vw;
  padding:50px 30px;
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  justify-content:space-evenly;
}.radio-toolbar label
{
  font-size:1.2em;
}

My objective here is to create something that will enhance the look. Moreover, I want to keep the functionality of the Radio buttons intact but I don’t want the round circles. Instead, I want the labels to help me select that particular radio button value.

Firstly to hide the circle input, we will need to add the following piece of code.

.radio-toolbar input[type="radio"] {
    visibility: hidden;
    display: none;
  }

No circular buttons beside the labels can be seen!

Hooray! We have come halfway through our goal!

To design the labels for a better user experience, you can add the following piece of code.

.radio-toolbar label {
      display: inline-block;
      background-color: white;
      padding: 10px 20px;
      font-family: sans-serif, Arial;
      font-size: 16px;
      border: 2px solid rgb(235, 119, 98);
      border-radius: 5px;
      cursor: pointer;
  }
  
  .radio-toolbar label:hover {
    background-color:rgb(235, 119, 98);
    color:white
  }  .radio-toolbar input[type="radio"]:checked + label {
      background-color:rgb(250, 119, 98);
      color:white;
      border:2px dashed white;
  }

This is what it currently looks like after the styling.

This adds some basic style to the labels to make them look more like buttons and also changes the layout on hovering and selecting them.

Now, if you wish to know or get the value of the button which you have selected, we need to add the following piece of JavaScript and jQuery:

$(document).ready(function(){
        $("input[type='radio']").click(function(){
            var radioValue = $("input[name='val']:checked").val();
            if(radioValue){
                alert("Your have selected " + radioValue);
            }
        });
    });

See the final results here ~

Check out the above pen for a fully working solution.

Also, you can give a visit to my Github Profile below. Feel free to reach out to me on LinkedIn for any sort of opportunity or collab.

Sristi27 - Overview

Web developer and designer. Sristi27 has 56 repositories available. Follow their code on GitHub.

github.com

Hope this article was really helpful to all of you.

Thanks for reading!

More content at plainenglish.io