Change Checkbox Color CSS
We can’t apply styles to the checkbox which is displayed by default, so to change the checkbox color in css we have to hide the default “checked” symbol and create a custom “checked” symbol.
Default checkbox
To create the checkbox, we need to use <input> tag and set the “type” attribute to “checkbox”. The default checkbox background color is “blue” and the “checked” color is white.
HTML:
<h4>Select your skills:</h4>
<input type="checkbox">HTML <br>
<input type="checkbox">CSS <br>
<input type="checkbox"> JavaScript<br>
<input type="checkbox">ReactOutput:
Customized checkbox
To hide the default check, we need to select <input> checkbox class name and set some styles. We can create a custom checkbox by selecting the checkbox class name with “:checked::before” pseudo-class. To create the custom “checked” symbol, we need to pass the “Unicode value” to the “content” property. And we can change the background color of the checkbox in css by selecting <input> class name with “:checked” pseudo-classand setting the “background” to your desired color.
Check Mark Checkbox
Example
<!DOCTYPE html>
<html>
<head>
<title>Custom Checkbox</title>
<style type="text/css">
.custom-checkbox {
-webkit-appearance: none; /* Remove default appearance */
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 4px;
outline: none;
transition: background-color 0.3s ease-in-out;
}
.custom-checkbox:checked::before {
content: '\2714'; /* check mark symbol Unicode */
display: block;
text-align: center;
font-size: 16px;
line-height: 18px;
color: white;
}
.custom-checkbox:checked {
background-color: green; /* Change background color when checked */
}
</style>
</head>
<body>
<h4>Select your skills:</h4>
<input type="checkbox" class="custom-checkbox">HTML <br>
<input type="checkbox" class="custom-checkbox">CSS <br>
<input type="checkbox" class="custom-checkbox">JavaScript<br>
<input type="checkbox" class="custom-checkbox">React
</body>
</html>Output:
Cross Mark Checkbox
<!DOCTYPE html>
<html>
<head>
<title>Custom Checkbox</title>
<style type="text/css">
.custom-checkbox {
-webkit-appearance: none; /* Remove default appearance */
-moz-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 2px solid #999;
border-radius: 4px;
outline: none;
transition: background-color 0.3s ease-in-out;
}
.custom-checkbox:checked::before {
content: '\2718'; /*cross mark symbol Unicode */
display: block;
text-align: center;
font-size: 16px;
line-height: 18px;
color: white;
}
.custom-checkbox:checked {
background-color: red; /* Change background color when checked */
}
</style>
</head>
<body>
<h5>Pick the fruits you don't like:</h5>
<input type="checkbox" class="custom-checkbox">Apple <br>
<input type="checkbox" class="custom-checkbox">Banana<br>
<input type="checkbox" class="custom-checkbox">Stawberry<br>
<input type="checkbox" class="custom-checkbox">Grapes
</body>
</html>Output:
Unicodes of checkmark
You can use the below Unicode to create different check marks for your checkboxes. If you paste the Unicode in the ‘Content’ property, the checkmark will change.
| Symbol | Unicode | Name |
|---|---|---|
| ✅︎ | \2705 | WHITE HEAVY CHECK MARK |
| ✓ | \2713 | CHECK MARK |
| ✔ | \2714 | HEAVY CHECK MARK |
| 🗸 | \1F5F8 | LIGHT CHECK MARK |
| ✘ | \2718 | BALLOT X |
| ❌ | \274C | CROSS MARK |
| 🞭 | \1F7AD | SALTIRE |
Conclusion
Customizing the appearance of checkboxes can greatly enhance the visual appeal of your web forms. This pseudo class methods provide flexibility in changing the checkbox color to match your website’s design.
Remember that these methods only change the checkbox’s appearance, not its functionality. Users will still be able to interact with the checkbox and select or deselect options as usual. By leveraging CSS, you can create a more cohesive and engaging user experience, making your forms visually appealing and in line with your overall design aesthetic.
