HomeCSSCustom Radio Buttons | Pure CSS

Custom Radio Buttons | Pure CSS

Are you bored with the default look of radio buttons? And need a custom radio button to suit your UI or website theme better? Then this is the tutorial for you. Styling radio inputs in CSS is not as simple as setting background colors and borders. Several techniques have evolved to style these radio buttons; most of them are overly complicated, and some others even need javascript to be fully functional. But don’t worry in this tutorial, we are going to create a custom checkbox that doesn’t require any advanced strategies or any images. All you need is Pure CSS. The little trick we will be using here is ‘labels’ and ‘:checked’ selector.

HTML

So let us start with our HTML section. We will begin by creating a container that will help us to wrap and center our radio inputs. Next, we will create two radio inputs with the name ‘radio’. Note that it is necessary for both the radio buttons to have the same name.

In the next step, We create labels for each of these radio input. We link the inputs with labels using the Ids. We end up having two labels: label for=”opt1″ and label for=’opt2′. Here we are creating a YES/No radio button, so let us include ‘Yes’ and ‘No’ text inside our labels with a span element.

<div class="container">
   <input type="radio" name="radio" id="opt1">
   <label for="opt1" class="label1">
       <span>YES</span>
   </label>
   <input type="radio" name="radio" id="opt2">
   <label for="opt2" class="label2">
       <span>NO</span>
   </label>
</div>

CSS

Centering The Container:

Moving on to CSS, First of all, we need to discard the document’s default padding and the margin; therefore, we set the padding and margin to 0. Next, we set a pleasant off-white color with hex-code #f5f5f5 as a background for our document body. Here we are using flex layout to center our container.

body {
   background-color: #f5f5f5;
   padding: 0;
   margin: 0;
   height:100vh;
   width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;
}
Styling The Container:

In the next step, we set dimensions for the container as 260*90px. We add a slight box-shadow to the container, so it appears to lift from the surface.

.container {
   background-color: white;
   height: 90px;
   width: 260px;
   position: absolute;
   box-shadow: 0 0 30px 0px #d1d1d1;
   overflow: hidden;
}
Hiding Radio Inputs:

The foremost vital step here would be hiding our default input radio buttons by setting them to display none.

input[type="radio"] {
   display: none;
}
Styling Labels:

We now need to replace these hidden radio buttons with labels. For this, we must set some height and width for labels. While setting those, let us keep in mind the height of our labels should be exactly double that of the container’s height. Also, the width of labels should be exactly half of the width of the container. These labels will now act as our radio buttons.

We set the background-image to a solid linear gradient that consists of two colors: #ffffff and #2c2c2c. The direction of the gradient is set from top to bottom. The background now seems to overflow from the container as the background has double the height of the container. Hence we need to set the overflow property of the container to hidden. The overflown background is no more visible.

We set a 0.5s transition time for the labels to ensure smooth transitions.

.label1,.label2 {
   display: block;
   height: 180px;
   width: 130px;
   background-size: 130px 180px;
   background:linear-gradient(
	   to bottom,
	   white 0,white 90px,
 	   #2c2c2c 90px, #2c2c2c 180px
	   );
   position: absolute;
   top:0;
   transition: 0.5s;
   color: #2c2c2c;
}
Positioning Labels:

Position the ‘No’ option to the right side of the container by setting the right attribute to 0. Here remember that we are using absolute position.

.label2 {
   right: 0;
}
Basic Typography:

Add basic typography styling to both the span elements. Again we use flex to center the contents of span element.

span {
   display: flex;
   height: 90px;
   width: 130px;
   justify-content: center;
   align-items: center;
   font-family: 'Rubik',sans-serif;
   font-weight: 500;
   font-size: 22px;
}
Styling for ‘:checked’ state:

Coming to the Final step, We use ‘input: checked + label’ selector to select the adjacent label element when a user checks an input. So every time the user clicks a label, they actually check the radio button corresponding to the label. We set background-position of labels to shift by 90px towards the top hence bringing the black(#2c2c2c) color of gradient over the checked labels making it look highlighted or selected. The last thing we need to do is set the text color to white.

input:checked + label {
   background-position: 0 -90px;
   color: white;
   transition: 1s;
}

That’s it for this tutorial. I hope you guys are now confident with styling radio buttons and customizing them as per your requirements. You can stay updated with the latest tutorials by subscribing to us on Youtube. You can also find us on Instagram.

RELATED ARTICLES

Tooltips With CSS

Cowboy CSS Art

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here

1 × one =

Most Popular

Truncate Text App Javascript

Tooltips With CSS

Cowboy CSS Art