CSS Radio Button

The radio button is an HTML element that helps to take input from the user. Although it is hard to style the radio button, pseudo-elements makes it easier to style the radio button. Radio buttons are applied when there is the requirement of a single selection from a group of items.

This HTML element is generally used on every website, but without styling them, they look similar on every website. So, styling them will make our site different and attractive. Designing the radio button using CSS is an interesting and creative task, which will provide a new look to the default radio button.

To create the custom radio buttons, we require to write an HTML markup, and to style, we have to write the CSS.

Styling of the radio button will be clear by using some illustrations. Let's see some of the illustrations for the same.

Example

In this example, we are using the '~' which is the sibling combinator. It selects all elements that are preceded by the previous selector. We have also used the pseudo-class :hover to style the radio button when the user moves the cursor over it.

<!DOCTYPE html>
<html>
<style>
.container {
  display: block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 20px;
  cursor: pointer;
  font-size: 25px;
}

/* Hide the default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* custom radio button */
.check {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
  width: 30px;
  background-color: lightgray;
  border-radius: 50%;
}

.container:hover input ~ .check {
  background-color: gray;
}

.container input:checked ~ .check {
  background-color: blue;
}

.check:after {
  content: "";
  position: absolute;
  display: none;
}

.container input:checked ~ .check:after {
  display: block;
}

.container .check:after {
 	top: 8px;
	left: 8px;
	width: 15px;
	height: 15px;
	border-radius: 50%;
	background: white;
}
</style>
<body>

<h1> Example of Custom Radio Buttons</h1>
<h2> Select your category </h2>
<label class="container">GEN
  <input type="radio" name="radio" checked>
  <span class="check"></span>
</label>
<label class="container">OBC
  <input type="radio" name="radio">
  <span class="check"></span>
</label>
<label class="container">SC
  <input type="radio" name="radio">
  <span class="check"></span>
</label>
<label class="container">ST
  <input type="radio" name="radio">
  <span class="check"></span>
</label>

</body>
</html>

Test it Now

To understand it more clearly, we will see another demonstration of styling the radio buttons. Styling the radio buttons using CSS gives a professional look to the website.

Example2

<!DOCTYPE html> 
<html> 
    <head> 
        <style> 

.container{
    float: left;
    margin: 10px;
}
.right{
    float: left;
    margin: 10px;
	color: blue;
	font-size: 20px;
    font-weight:bold;
}
.radio {
    width: 20px;
    position: relative;
}
.radio label {
    width: 20px;
    height: 20px;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 0;
    background: white;
    border-radius: 50px;
    box-shadow: inset 0px 1px 1px white, 3px 3px 9px rgba(0,0,0,0.5);
    border: 1px solid black;
}
.radio label:after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    border: 6px solid blue;
    border-radius: 50px;
    opacity: 0;
    }
.radio label:hover::after {
    opacity: 0.3;
    }
.radio input[type=radio] {
    visibility: hidden;
}
.radio input[type=radio]:checked + label:after {
     opacity: 1;
    }  
        </style> 
    </head> 
    <body> 
        <h1> Example of CSS radio buttons </h1> 
	<h2> Click the following radio buttons to see the effect </h2>

<div class="container">
<div class="radio">
<input type="radio" value="Male" name='gender' id='male' />
<label for="male"></label>
</div>
</div>
<div class="right">Male</div>
 
<div class="container">
<div class="radio">
<input type="radio" value="Female" name='gender' id='female' />
<label for="female"></label>
</div>
</div>
<div class="right">Female</div>
        </center> 
    </body> 
</html>

Test it Now

Next TopicCSS Superscript and Subscript

← prev next →