in this tutorial, I will show you how to customize your Radio button using CSS only.
I will give you the Source code of the project, only what you have to do is to copy& paste it. of course, you can change it and modify it as you like to adapt it to your website design.
HTML code
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="main.css">
<title>Custom Radio button</title>
</head>
<body>
<div class="container">
<h1>Pick a number</h1>
<div class="Group">
<label>One
<input type="radio" name="num" value="1">
<span class="Radio"></span>
</label><br>
<label>Two
<input type="radio" name="num" value="1">
<span class="Radio"></span>
</label><br>
<label>Three
<input type="radio" name="num" value="1">
<span class="Radio"></span>
</label><br>
<label>Four
<input type="radio" name="num" value="1">
<span class="Radio"></span>
</label><br>
</div>
</div>
</body>
</html>
CSS code
@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');
.container{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
border-radius: 8px;
background-color: #fafafa;
box-shadow: 0 2px 8px rgba(64,64,64,.5);
padding: 10px 40px;
font-family: 'Open Sans',sans-serif;
}
.container label{
position: relative;
display: block;
font-size: 22px;
padding-left: 5px;
user-select: none;
cursor: pointer;
}
.container label input{
opacity: 0;
width: 0;
height: 0;
position: relative;
}
.container label .Radio{
position: absolute;
top: 0;
left: 50%;
display: block;
width: 25px;
height: 25px;
margin-left: 25px;
border-radius: 100%;
border: 1px solid #03a9f4;
transition: .4s ease;
}
.container label:hover .Radio{
border: 2px solid #03a9f4;
}
.container label .Radio::after{
content: '';
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: 70%;
height: 70%;
border-radius: 100%;
display: none;
background-color:#03a9f4;
}
.container label input:checked ~ .Radio::after{
display: block;
}
Thank you for following this tutorial, I hope that you liked it. comment below if you want any other project.
How to Make a Custom Radio button using Only CSS
Reviewed by Medics
on
July 12, 2019
Rating:
Reviewed by Medics
on
July 12, 2019
Rating:
No comments: