In your html file write:
<!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 Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-group">
<label for="gender" class="text-light">Gender</label>
<div class="radio inline">
<input type="radio" id="radio-2" name="gender" value="Male">
<label for="radio-2" class="radio-label">Male</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-3" name="gender" value="Female">
<label for="radio-3" class="radio-label">Female</label>
</div>
</div>
<div class="form-group">
<label for="gender" class="text-light">Status</label>
<div class="radio inline">
<input type="radio" id="radio-4" name="status" value="Active">
<label for="radio-4" class="radio-label">Active</label>
</div>
<div class="radio inline">
<input type="radio" id="radio-5" name="status" value="Inactive">
<label for="radio-5" class="radio-label">Inactive</label>
</div>
</div>
</body>
</html>
Then in your style.css file write:
.form-group .radio
{
margin: 1em 2em;
}
/* adding style to radio buttons */
.radio input[type="radio"]
{
position: absolute;
opacity:0;
}
.radio input[type="radio"] + .radio-label:before{
content: "";
background:var(--border-btn);
border-radius: 100%;
border: 1px solid var(--border);
display: inline-block;
width: 1em;
height: 1em;
position: relative;
top: -0em;
margin-right: .5em;
vertical-align: top;
text-align: center;
-webkit-transition: all 250ms ease;
transition: all 250ms ease;
}
.radio input[type="radio"]:checked + .radio-label:before{
background-color: #16db93;
box-shadow: inset 0 0 0 4px #e9ecef;
}
.radio input[type="radio"]:focus + .radio-label:before{
outline: none;
border-color: #16db93;
}
.radio input[type="radio"]:disabled + .radio-label:before{
box-shadow: inset 0 0 0 4px #e9ecef;
border-color: #b4b4b4;
background: #b4b4b4;
}
Comments
Post a Comment