How to Style a Checkbox Like a Radio Button: With CSS code
Sometimes, developers are required to style checkboxes to resemble radio buttons in order to meet client specifications. In this tutorial, I’ll explain how to customize checkboxes to look like radio buttons, providing both the HTML and CSS code to achieve this effect.
To make your checkboxes look like radio button, you can hide the default checkbox marker and create your own marker using the ::before or::after pseudo elements. The great thing about this approach is that when the checkbox is checked, you can style the ::before pseudo-element to make it appear active.
In this example, I’m using the ::before pseudo-element. The class .check-radio is used to target the checkbox and apply styling.
HTML
<input class="check-radio" type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input class="check-radio" type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input class="check-radio" type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label><br>
CSS
.check-radio{
width: 0px;
height: 0px;
margin-right: 20px;
}
.check-radio::before{
content:'';
padding: 0px 3px;
margin-top: -11px;
border: 1px solid black;
border-radius: 50%;
border: 2px solid white;
background-color: white;
outline: 1px solid black;
display: block;
height: 7px;
}
input[type="checkbox"]:checked::before{
background-color: #007BFF;
}
Thank you for reading! If you found this resource helpful, consider buying me a coffee. Your support is greatly appreciated!
