HTML
<label>
<input type="radio" name="radio" class="radio" value="HTML">
<div><span></span></div>
<p>HTML</p>
</label>
So,
- Label tag is for binding (As the radio button is inside the label tag. So, When user click on label tag, radio button will checked, means click on wherever in label tag like input tag radio, p tag, div tag or span tag).
- Input tag is for radio button.
- Div tag and span tag is for custom radio button. We going to style this tags as a custom radio button. When radio button checked we going to style this div and span tag.
- P tag is for showing the user, that what value that radio button have.
Video Tutorial on Custom Radio Button:
Custom Radio Button.
File structure:
- Create one folder
- Open it in your code editor
- Create two files with name index.html and index.css
I've also used JavaScript to get the value of the selected radio button. The JavaScript is integrated within the HTML file.
Let's create animated radio buttons using HTML & CSS. And also get the value of selected radio button on click using JavaScript.
Step 1: Create basic structure and link file.
So first we'll create a basic structure of HTML and link the CSS file with the HTML file.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom radio button</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
Step 2: Create a custom radio button.
Now let's create a design of a custom radio button using HTML and CSS. We going to add default radio button, div span tag and p tag inside label tag.
- div: for custom radio button circle.
- span tag: place inside div for dot inside a radio button.
We going to design this two tag as a custom radio button.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechtuff.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom radio button | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="box">
<label>
<input type="radio" name="radio" class="radio" value="HTML">
<!-- custom radio button -->
<div><span></span></div>
<!-- radio button value, just for displaying -->
<p>HTML</p>
</label>
<label>
<input type="radio" name="radio" class="radio" value="CSS">
<!-- custom radio button -->
<div><span></span></div>
<!-- radio button value, just for displaying -->
<p>CSS</p>
</label>
<label>
<input type="radio" name="radio" class="radio" value="JAVASCRIPT">
<!-- custom radio button -->
<div><span></span></div>
<!-- radio button value, just for displaying -->
<p>JAVASCRIPT</p>
</label>
<label>
<input type="radio" name="radio" class="radio" value="PHP">
<!-- custom radio button -->
<div><span></span></div>
<!-- radio button value, just for displaying -->
<p>PHP</p>
</label>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
.box {
width: 400px;
background-color: #fff;
border-radius: 5px;
padding: 20px;
}
.box label {
display: flex;
margin: 15px 0px;
cursor: pointer;
align-items: center;
padding: 10px;
border-radius: 5px;
}
.box label:hover {
background-color: #f4f5ff;
}
/* ---------- custom radio button ---------- */
.box label div {
width: 35px;
height: 35px;
background-color: #fff;
margin: 5px;
border: 2px solid blue;
box-shadow: inset 0px 0px 8px -4px rgb(0 0 255);
border-radius: 200px;
position: relative;
}
.box label div span {
position: absolute;
width: 15px;
height: 15px;
border-radius: 200px;
background-color: blue;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s ease-in;
}
/* ---------- end of custom radio button ---------- */
.box label p {
font-size: 20px;
margin-left: 10px;
}
Output:
As you can see in the above image that there is a default radio button and beside it there is a custom radio button. As you can see their is a dot in the middle of custom radio button that define that the radio button is checked or selected.
We'll remove that dot and add only when its default radio button is selected. Means we'll add and remove that dot according to its default radio button state.
First we'll remove the dots. by just removing the background property of the custom radio button. And also remove the box shadow from the div.
Output:
As we have bind the default radio button with label tag by adding default radio button inside label tag. So when a user clicks on a label tag the default radio button reacts or its state will change.
Based on that default radio button state we'll add and remove the dots in the custom radio button. I have added blue colour to custom radio buttons. You can add some other colours.
CSS
.box label input:checked + div{
box-shadow: inset 0px 0px 8px -4px rgb(0 0 255);
}
.box label input:checked + div span{
background-color: blue;
}
Output :
As you can see when the default radio button is checked, its custom radio button gets the dot that appears like selected.
As the custom radio button works we can remove the default one.
CSS
.box label input{
display: none;
}
Custom radio buttons are created. Now let's add animation to it by CSS keyframes.
Step 4: Add animation to custom radio buttons.
For animation, we are going to use keyframes in CSS.
So first we'll make some changes to the span tag (which is the blue colour dot in the custom radio button).
We'll remove the margin and add top: 50%, left: 50%, transform: translate(-50%, -50%).
And we'll add animation name and animation duration to span tag when its style changes on the radio button selection. See the below code.
CSS
.box label div span{
position: absolute;
width: 15px;
height: 15px;
border-radius: 200px;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
transition: all 0.3s ease-in;
}
.box label input:checked + div span{
background-color: blue;
animation-name: radio;
animation-duration: 0.3s;
}
Adding keyframes for animation. So, the animation is something like when the user clicks on the radio button the span tag or blue dot appears in the centre of the div tag with bounce effect. You can see the demo in the above YouTube video for better understanding.
CSS
@keyframes radio {
25%{
width: 10px;
height: 5px;
}
50%{
width: 10px;
height: 5px;
}
75%{
top: -10px;
width: 10px;
height: 15px;
}
100%{
width: 10px;
height: 15px;
}
}
Step 5: Getting the value of the radio button.
To get the value of the radio button which is checked, we'll use JavaScript. We are going to get value on a click of a button. So let's first add one button with an onclick function declared inside HTML.
And also add one box with class="box_value" (in which we going to display value of radio buttons which is checked)
We'll add this after the label tags in HTML files.
HTML
<button type="button" class="button" onclick="getvalue()">Submit</button>
<div class="box_value"></div>
CSS
.box .button{
font-size: 25px;
background-color: blue;
padding: 10px 20px;
color: #fff;
border: none;
float: right;
border-radius: 5px;
cursor: pointer;
}
Output :
JavaScript to get the value of the radio button which is checked.
So, to get the value we are going to use the foreach method, because we have multiple radio buttons, and on click of submit button if any radio button is checked then we show the value of that radio button in the div tag with class value box_value.JavaScript
let radio = document.querySelectorAll(".radio");
let button = document.querySelector(".button");
let box_value = document.querySelector(".box_value");
function getvalue(){
radio.forEach(element => {
if(element.checked){
box_value.innerHTML = element.value;
}
});
}
Output :
As you can see, I have selected CSS option and when click on submit button, I get the value CSS.
You may like:
- How to create animated radio button looks like checkbox button using HTML and CSS.
- How to create custom circulat checkboxes using HTML and CSS.
- How to create animated checkboxes using html, css and javascript.
- How to create a right tick animation using HTML, CSS and JavaScript.
Final code:
So that's how you can make a custom radio button and get the value of the checked radio button. If you have any question or suggestion you can write in the comment section.
Share your thoughts.