The radio button is an HTML element designed to receive user input. While customizing the radio button can be challenging, pseudo-elements provide a more straightforward approach to customization. Radio buttons are utilized when only one selection is allowed from a set of options.
This HTML element is commonly employed on all websites, yet their appearance remains uniform without any styling. Enhancing their design can set our website apart and enhance its appeal. Crafting a unique appearance for radio buttons with CSS presents an engaging and imaginative challenge, offering a fresh aesthetic to the standard radio button.
To craft personalized radio buttons, it is essential to author HTML markup, and for customization, CSS code needs to be developed.
Illustrations can provide a clear demonstration of how radio buttons can be styled effectively. Let's take a look at some visual examples to better understand this concept.
Example
In this instance, we are employing the ' ~ ' symbol, known as the sibling combinator, which targets elements following a specific selector. Additionally, we have applied the :hover pseudo-class to customize the appearance of the radio button when the user hovers over it with the cursor.
<!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>
To gain a better grasp of the concept, let's explore another example of customizing the radio buttons. Utilizing CSS to style radio buttons enhances the visual appeal of the website, providing a more polished and sophisticated appearance.
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>