Custom Radio Buttons Using Only HTML & CSS
If you want to use radio buttons, then first of all you have to know some details, here it is power to be used on blogger website also, you must have thought that it will work on blogger and wordpress too
Lightly you must have ever decided on Next Next Buttons, you have got power on your website or your project the channel has CodingNepal Credit this topic.
A radio button or option button is a type of selection indicator or button that allows a different user to view the form and select only one option. In a radio button, to notify the user if an option is selected. When the circle is filled, that option is selected.
Video Tutorial of Custom Radio Buttons or Option Buttons
In the video, you've seen the custom radio or choice buttons. As you most likely are aware, this is an unadulterated CSS program that implies just HTML and CSS are utilized to make these buttons. To make these buttons, I utilized HTML <input type="radio"> and <label> labels. You can likewise utilize the radio tag just to make a custom radio button however I utilized a name tag to control the radio button on text or mark click.
If you want to control the <input type=”radio”> with <label> then you need to pass the id name of radio tag inside for attribute of the label tag like this <input type=”radio” name=”select” id=”option-1″> and <label for=”option-1″></label>. You’re thinking about why I used name attribute in radio tag, if you want, the user can select only one option in a form then this name attribute value must be the same as all other radio tags.
Custom Radio Buttons or Option Buttons [Source Cods]
To make this program (Custom Radio Buttons). To begin with, you really want to make two Files one HTML File and another is CSS File. In the wake of making these records simply glue the accompanying codes in your document.
In the first place, make a HTML document with the name of index.html and glue the given codes in your HTML record. Keep in mind, you've to make a document with .html expansion.
<!DOCTYPE html>
<!-- Created By Coding Wang -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Custom Radio Buttons | CodingLab</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<input type="radio" name="select" id="option-1" checked>
<input type="radio" name="select" id="option-2">
<label for="option-1" class="option option-1">
<div class="dot"></div>
<span>Student</span>
</label>
<label for="option-2" class="option option-2">
<div class="dot"></div>
<span>Teacher</span>
</label>
</div>
</body>
</html>Second, make a CSS document with the name of style.css and glue the given codes in your CSS record. Keep in mind, you've to make a document with css expansion.
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
place-items: center;
background: #0069d9;
}
.wrapper{
display: inline-flex;
background: #fff;
height: 100px;
width: 400px;
align-items: center;
justify-content: space-evenly;
border-radius: 5px;
padding: 20px 15px;
box-shadow: 5px 5px 30px rgba(0,0,0,0.2);
}
.wrapper .option{
background: #fff;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
margin: 0 10px;
border-radius: 5px;
cursor: pointer;
padding: 0 10px;
border: 2px solid lightgrey;
transition: all 0.3s ease;
}
.wrapper .option .dot{
height: 20px;
width: 20px;
background: #d9d9d9;
border-radius: 50%;
position: relative;
}
.wrapper .option .dot::before{
position: absolute;
content: "";
top: 4px;
left: 4px;
width: 12px;
height: 12px;
background: #0069d9;
border-radius: 50%;
opacity: 0;
transform: scale(1.5);
transition: all 0.3s ease;
}
input[type="radio"]{
display: none;
}
#option-1:checked:checked ~ .option-1,
#option-2:checked:checked ~ .option-2{
border-color: #0069d9;
background: #0069d9;
}
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot{
background: #fff;
}
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before{
opacity: 1;
transform: scale(1);
}
.wrapper .option span{
font-size: 20px;
color: #808080;
}
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span{
color: #fff;
}That is all, presently you've effectively made Custom Radio Buttons utilizing just HTML and CSS. On the off chance that your code works or you've faces no mistakes/issues then kindly remark down or get in touch with us from the contact page.
Previous Post
Next Post
Follow Me Google News
Post a Comment