Here, we will see how to add custom style to radio buttons using bootstrap 4 class. We just need to add .custom-radio-button class to the div outside of input fields. So we can change the different colors of the radio buttons if we need. Follow the below example to create this.
Example:
Create a html file on your editor and add the below codes on it.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 4 custom style radio button Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.usebootstrap.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="custom-radio-button">
<div>
<input type="radio" id="red-color" name="color" value="red-color" checked>
<label for="red-color"><span></span></label>
</div>
<div>
<input type="radio" id="green-color" name="color" value="green-color">
<label for="green-color"><span></span></label>
</div>
<div>
<input type="radio" id="blue-color" name="color" value="blue-color">
<label for="blue-color"><span></span></label>
</div>
</div>
</div>
</div>
</body>
</html> Follow the below codes to stylesheet and link it your html file.
html, body{
padding: 20px;
margin: 20px;
text-align: center;
}
.custom-radio-button div {
display: inline-block;
}
.custom-radio-button input[type="radio"] {
display: none;
}
.custom-radio-button input[type="radio"] + label {
color: #333;
font-size: 14px;
}
.custom-radio-button input[type="radio"] + label span {
display: inline-block;
width: 40px;
height: 40px;
margin: -1px 4px 0 0;
vertical-align: middle;
cursor: pointer;
border-radius: 50%;
border: 1px solid #f1f1f1;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.33);
background-repeat: no-repeat;
background-position: center;
text-align: center;
line-height: 44px;
}
.custom-radio-button input[type="radio"] + label span img {
opacity: 0;
transition: all 0.3s ease;
}
.custom-radio-button input[type="radio"]#red-color + label span {
background-color: #FF0000;
}
.custom-radio-button input[type="radio"]#green-color + label span {
background-color: #00FF00;
}
.custom-radio-button input[type="radio"]#blue-color + label span {
background-color: #0000FF;
}
.custom-radio-button input[type="radio"]:checked + label span {
opacity: 1;
display: inline-block;
background: url("tick-icon.png") center center no-repeat;
width: 40px;
height: 40px;
}