The checkbox is an HTML form element rendered as a small square-shaped box by default. They are used to take inputs from users. When a user selects a checkbox, it is tick-marked; hence, the name checkbox. You can use CSS checkbox styling to enhance the appearance of the element. Without CSS checkbox style, they will have a default look. It means that your website will look identical to other websites using default checkboxes, making it appear dull. Therefore, it is important to style the element to make your website look different and unique.
To style a checkbox, you first need to hide the default one. You can then use your creativity to style the element and make it appealing.
A checkbox allows users to select one or more options from a list. Hence, it is a significant HTML form element if you want to give multiple options to your users, and allow them to select either one or multiple options. However, if you want to restrict users from selecting only one option, a radio button is better.
Note: Radio buttons work similar to checkboxes with a single primary difference. Checkboxes are used as single values, whereas radio buttons are grouped into a single set. Hence, you can only select a single value with radio buttons, whereas checkboxes allow selecting multiple options.
Examples for Creating a Custom Checkbox CSS Style
Styling a checkbox can be very challenging. Hence, going through some easy-to-follow examples is the best way to learn how to style a checkbox using CSS. We will be creating a custom checkbox using multiple pseudo-classes like checked, before, and after, for this example. With these pseudo-classes, we will try to create a ripple effect. So, whenever a checkbox is selected, you will see a ripple effect across the checkbox, making it look attractive.
Example:
Here’s how the code will look:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hobby</h1>
<div class="check_example">
<div class="check-container">
<label class="checkbox-label">Sports
<input type="checkbox">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Music
<input type="checkbox">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Dancing
<input type="checkbox">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Cooking
<input type="checkbox" checked="check">
<span class="check"></span>
</label>
</div>
</div>
</body>
</html>
CSS Code:
body{
text-align: center;
}
.check_example{
width: 400px;
margin: 30px auto;
clear: both;
display: block;
background-color: Red;
border-radius: 5px;
}
.check_example::after{
clear: both;
display: block;
content: "";
}
.check_example .check-container{
float: left;
width: 50%;
box-sizing: border-box;
text-align:center;
padding: 20px 0px;
}
/* Here we start styling the checkboxes */
.checkbox-label{
color: white;
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 20px;
line-height: 20px;
height: 75px;
width: 30px;
clear: both;
}
.checkbox-label input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .check{
top:30px;
position: absolute;
height: 30px;
width: 30px;
background-color: transparent;
border-radius: 10px;
transition: all 0.5s ease-in;
border: 2px solid white;
}
.checkbox-label input:checked ~ .check {
background-color: white;
border-radius: 5px;
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid white;
}
.checkbox-label .check::after {
position: absolute;
content: "";
border-radius: 5px;
}
.checkbox-label input:checked ~ .check::after {
transform: rotate(45deg) scale(1);
left: 10px;
top: 4px;
width: 8px;
height: 12px;
border: solid red;
border-width: 0 4px 4px 0;
border-radius: 0;
}
/* This part of the code will create the ripple effect transition */
.checkbox-label .check::before {
position: absolute;
content: "";
border-radius: 10px;
border: 10px solid white;
transform: scale(0);
}
.checkbox-label input:checked ~ .check::before {
left: -3px;
top: -3px;
width: 30px;
height: 30px;
border-radius: 10px;
transform: scale(3);
opacity:0;
transition: all 2s ease-out;
}
Output:
How to Set Checkbox CSS Size With Height and Width Property
Setting the checkbox CSS size is very easy. You can simply use CSS’s height and width properties and set the checkbox CSS size.
Here’s an example for setting the size of a checkbox in CSS.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Size example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="style">
<input type="checkbox" class="defaultSize"
name="checkBox1" checked>
<input type="checkbox" class="customSize"
name="checkBox2" checked>
</div>
</body>
</html>
CSS Code:
.style{
border: 2px solid black;
}
input.customSize{
width: 100px;
height: 100px;
}
Output:
How to Set Checkbox CSS Size With Transform Property
Using the height and width property works well with Google Chrome and Microsoft Edge. But when it comes to Mozilla Firefox or Safari, the height and width property does not work appropriately. With these browsers, although the clickable size is as mentioned in the code, the default size of the checkbox will remain the same. You can overcome this by using the transform property. The transform property allows designating the desired height and width to the checkbox in all browsers.
Here’s the code to use the transform property to style the checkbox in CSS.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Size example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<input type="checkbox" class="customSize"
name="Box2" checked>
</body>
</html>
CSS Code:
input.customSize {
transform : scale(5);
}
body {
text-align:center;
margin-top:50px;
}
Output:
How to Checkmark Checkbox CSS by Default
Checkmarking a checkbox in CSS is pretty easy. You simply need to use the “checked” value. All the checkbox fields with the checked value will be checked by default. Below is a demonstration for pre-marking two of the four checkboxes we have used in the checkbox example code above, but this time without the ripple effect.
Example:
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox example</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Hobby</h1>
<div class="check_example">
<div class="check-container">
<label class="checkbox-label">Sports
<input type="checkbox" checked="check">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Music
<input type="checkbox">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Dancing
<input type="checkbox">
<span class="check"></span>
</label>
</div>
<div class="check-container">
<label class="checkbox-label">Cooking
<input type="checkbox" checked="check">
<span class="check"></span>
</label>
</div>
</div>
</body>
</html>
CSS Code:
body{
text-align: center;
}
.check_example{
width: 400px;
margin: 30px auto;
clear: both;
display: block;
background-color: Red;
border-radius: 5px;
}
.check_example::after{
clear: both;
display: block;
content: "";
}
.check_example .check-container{
float: left;
width: 50%;
box-sizing: border-box;
text-align:center;
padding: 20px 0px;
}
/* Here we start styling the checkboxes */
.checkbox-label{
color: white;
display: block;
position: relative;
margin: auto;
cursor: pointer;
font-size: 20px;
line-height: 20px;
height: 75px;
width: 30px;
clear: both;
}
.checkbox-label input{
position: absolute;
opacity: 0;
cursor: pointer;
}
.checkbox-label .check{
top:30px;
position: absolute;
height: 30px;
width: 30px;
background-color: transparent;
border-radius: 10px;
transition: all 0.5s ease-in;
border: 2px solid white;
}
.checkbox-label input:checked ~ .check {
background-color: white;
border-radius: 5px;
transform: rotate(0deg) scale(1);
opacity:1;
border: 2px solid white;
}
.checkbox-label .check::after {
position: absolute;
content: "";
border-radius: 5px;
}
.checkbox-label input:checked ~ .check::after {
transform: rotate(45deg) scale(1);
left: 10px;
top: 4px;
width: 8px;
height: 12px;
border: solid red;
border-width: 0 4px 4px 0;
border-radius: 0;
}
Output:
Which Browsers are Compatible With Checkbox CSS?
Browsers that support checkbox CSS style are:
- Google Chrome
- Microsoft Edge
- Mozilla Firefox
- Internet Explorer
- Opera
- Safari
Advance your career as a MEAN stack developer with the Full Stack Web Developer - MEAN Stack Master's Program. Enroll now!
Conclusion
With this, we come to the end of our comprehensive checkbox CSS style guide. You can use the codes here and play with them in an editor to create different transition effects while selecting a checkbox. You can also create animation upon hovering on the checkbox using the transform and hover properties. Learning how to style a checkbox in CSS will help you create beautiful and appealing web page forms. The best way to better understand the checkbox CSS styling will be to use it along with other fundamental properties. If you want to learn these fundamental CSS properties, you can refer to Simplilearn’s CSS Tutorial for Beginners. If you have already gone through the beginning stage, opt for our Advanced CSS Tutorial.
Moreover, if you want to excel in the software development field, it is advisable to go beyond and learn the other front-end development programming languages. Full-stack developers are in excess demand as they can manage end-to-end development, which benefits the employers. To become a full-stack developer, you can enroll in our Post Graduate Program in Full-Stack Web Development, or opt for our 90-day free Front-End Web Development Course. Pursuing these courses will increase your credibility as a developer and improve your chances of landing a rewarding job.