Hello, guys hope you all are well. Today, we are going to learn Custom Radio Buttons using HTML & CSS.
Radio is the type of input tag of the HTML. It is used to click an option for once,
Let's have a look at the given image of Custom Radio Buttons using HTML & CSS. There are three boxes, one is named by HTML second is named by CSS and last one is named by PHP.
You can see there is a button on the left side of that three boxes which look like a radio button but it is not,
Actually, it is made by CSS and the original radio button is hidden. Basically, the radio button is used only for check-in this program[Custom Radio Buttons using HTML & CSS]. When we clicked on these boxes the text color and the background color will change and the circular border comes into the radio button. These three boxes are not checked at the same time when one box checked another is unchecked automatically.
Custom Radio Buttons using HTML & CSS | Video
<!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="style.css">
</head>
<body>
<div class="container">
<input type="radio" name="select" id="option-1">
<input type="radio" name="select" id="option-2">
<input type="radio" name="select" id="option-3">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>HTML</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>CSS</span>
</label>
<label for="option-3" class="option option-3">
<div class="dot"></div>
<span>PHP</span>
</label>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: grid;
/* height: 100%; */
min-height: 100vh;
place-items: center;
background: rgb(21, 191, 197);
}
.container{
width: 30em;
height: 6em;
border-radius: .5em;
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-evenly;
border: 1px solid rgb(21, 191, 197);
padding: 20px 15px;
box-shadow: -3px -3px 5px rgba(0,0,0,0.2),
3px 3px 2px rgba(0,0,0,0.01);
}
.container .option{
width: 100%;
height: 100%;
background-color: #fff;
border: .2em solid lightgrey;
margin: 0 10px;
border-radius: .5em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.container .option span{
color: #80808080;
font-size: 1.4em;
}
.container .option .dot{
position: relative;
width: 1.2em;
height: 1.2em;
background-color: #eee;
border-radius: 50%;
}
.container .option .dot::before{
content: '';
position: absolute;
width: 0.5em;
height: 0.5em;
background-color: rgb(21, 191, 197);
left: 0.32em;
top: 0.3em;
border-radius: 50%;
opacity: 0;
transform: scale(1.4);
transition: all .3s ease-in-out;
}
#option-1:checked ~ .option-1 .dot::before{
opacity: 1;
}
#option-2:checked ~ .option-2 .dot::before{
opacity: 1;
}
#option-3:checked ~ .option-3 .dot::before{
opacity: 1;
}
#option-1:checked ~ .option-1 .dot,
#option-2:checked ~ .option-2 .dot,
#option-3:checked ~ .option-3 .dot
{
background-color: #fff;
}
#option-1:checked ~ .option-1,
#option-2:checked ~ .option-2,
#option-3:checked ~ .option-3 {
border-color: #fff;
background-color: rgb(21, 191, 197);
}
#option-1:checked ~ .option-1 span,
#option-2:checked ~ .option-2 span,
#option-3:checked ~ .option-3 span
{
color: #fff;
}
.container input{
display: none;
}
0 Comments