How to Change the Checked Mark Color of a Checkbox using CSS?
Last Updated :
29 Apr, 2025
Checkboxes are commonly used on websites to enable users to make selections, such as agreeing to terms and conditions or choosing preferences. A checkbox is a small square box in forms that users can click to select or deselect an option. By default, the checkmark inside the checkbox has a basic style, which may not match your site's design.
How to Change the Checkbox Checked Mark Color
Below are some common methods that can be used to change the checkbox mark color:
1. Using appearance: none
The easiest way to change the checkbox appearance is by removing the default style using the appearance property in CSS.
Now, let us understand with the help of the example:
HTML
<html>
<head>
<style>
.heading {
color: green;
text-align: center;
}
.subheading {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
position: relative;
margin: 10px;
}
/* Change the background color when checkbox is checked */
input[type="checkbox"]:checked {
background-color: #4CAF50;
border: 1px solid #4CAF50;
}
/* Add a check mark when checked */
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 12px;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
border-color: white;
border-style: solid;
}
label {
margin-left: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2 class="heading">Code World</h2>
<h3 class="subheading">Change Checkbox Color</h3>
<div class="container">
<input type="checkbox" id="styled-checkbox-1">
<label for="styled-checkbox-1">Option 1</label>
<input type="checkbox" id="styled-checkbox-2">
<label for="styled-checkbox-2">Option 2</label>
<input type="checkbox" id="styled-checkbox-3">
<label for="styled-checkbox-3">Option 3</label>
<input type="checkbox" id="styled-checkbox-4">
<label for="styled-checkbox-4">Option 4</label>
</div>
</body>
</html>
Output
How to Change the Checked Mark Color of a Checkbox using CSS?2. Using Pseudo-Elements
A common approach is to make a custom checkbox and its checked mark by hiding the normal checkbox and using the ::before and ::after pseudo-elements. This gives us complete control over how the checked and unchecked status look.
Now, let us understand with the help of the example:
HTML
<html>
<head>
<style>
.heading {
color: green;
text-align: center;
}
.subheading {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="checkbox"] {
width: 20px;
height: 20px;
appearance: none;
-webkit-appearance: none;
background-color: #e0e0e0;
border: 1px solid #ccc;
border-radius: 3px;
cursor: pointer;
position: relative;
}
input[type="checkbox"]:checked {
background-color: #4CAF50;
border: 1px solid #4CAF50;
}
input[type="checkbox"]:checked::after {
content: "";
position: absolute;
left: 5px;
top: 1px;
width: 6px;
height: 12px;
border-width: 0 3px 3px 0;
transform: rotate(45deg);
}
</style>
</head>
<body>
<h2 class="heading">Code World</h2>
<h3 class="subheading">Change Checkbox color</h3>
<div class=" container">
<input type="checkbox" id="styled-checkbox">
<label for="styled-checkbox">Option 1</label>
<input type="checkbox" id="styled-checkbox">
<label for="styled-checkbox">Option 2</label>
<input type="checkbox" id="styled-checkbox">
<label for="styled-checkbox">Option 3</label>
<input type="checkbox" id="styled-checkbox">
<label for="styled-checkbox">Option 4</label>
</div>
</body>
</html>
Output
How to Change the Checked Mark Color of a Checkbox using CSS?3. Using CSS accent-color Property
This property allows you to pick a single color that will be applied to the background of the checkbox, the checked mark, and other parts of the form control.
Now, let us understand with the help of the example:
HTML
<html>
<head>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
color: green;
text-align: center;
}
.subheading {
text-align: center;
}
input[type="checkbox"] {
accent-color: #4CAF50;
/* Green color */
}
</style>
</head>
<body>
<h2 class="heading">Code World</h2>
<h3 class="subheading">Change Checkbox color</h3>
<div class="container">
<label>
<input type="checkbox" id="checkbox1">
<span class="custom-checkbox"></span> Option 1
</label>
<label>
<input type="checkbox" id="checkbox1">
<span class="custom-checkbox"></span> Option 2
</label>
<label>
<input type="checkbox" id="checkbox1">
<span class="custom-checkbox"></span> Option 3
</label>
<label>
<input type="checkbox" id="checkbox1">
<span class="custom-checkbox"></span> Option 4
</label>
</div>
</body>
</html>
Output
How to Change the Checked Mark Color of a Checkbox using CSS?4. Using a Custom Background Image for the Checkbox
For a more unique and personalized checkbox design, a custom background image can be applied to the checked mark, allowing for greater flexibility and customization beyond the default styles.
Now, let us understand with the help of the example:
HTML
<html>
<head>
<style>
.heading {
color: green;
text-align: center;
}
.subheading {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="checkbox"] {
width: 30px;
height: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #f0a500;
border: 2px solid #ccc;
border-radius: 5px;
cursor: pointer;
position: relative;
margin: 10px;
}
input[type="checkbox"]:checked {
background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/a/a2/Checkmark_green.svg/1200px-Checkmark_green.svg.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
label {
margin-left: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2 class="heading">Code World</h2>
<h3 class="subheading">Change Checkbox Color Using Custom Background Image</h3>
<div class="container">
<input type="checkbox" id="styled-checkbox-1">
<label for="styled-checkbox-1">Option 1</label>
<input type="checkbox" id="styled-checkbox-2">
<label for="styled-checkbox-2">Option 2</label>
<input type="checkbox" id="styled-checkbox-3">
<label for="styled-checkbox-3">Option 3</label>
<input type="checkbox" id="styled-checkbox-4">
<label for="styled-checkbox-4">Option 4</label>
</div>
</body>
</html>
Output
How to Change the Checked Mark Color of a Checkbox using CSS?5. Using box-shadow for the Check Mark
To change the color of the checked mark without fully redesigning the checkbox, the box-shadow property can be used to create a simple and subtle effect.
Now, let us understand with the help of the example:
HTML
<html>
<head>
<style>
.heading {
color: green;
text-align: center;
}
.subheading {
text-align: center;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
}
input[type="checkbox"] {
width: 30px;
height: 30px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-color: #e0e0e0;
border: 2px solid #ccc;
border-radius: 5px;
cursor: pointer;
position: relative;
margin: 10px;
}
input[type="checkbox"]:checked {
background-color: #4CAF50;
border: 2px solid #4CAF50;
box-shadow: inset 0 0 0 4px white;
}
label {
margin-left: 10px;
font-size: 16px;
}
</style>
</head>
<body>
<h2 class="heading">Code World</h2>
<h3 class="subheading">Change Checkbox Color Using Box Shadow</h3>
<div class="container">
<input type="checkbox" id="styled-checkbox-1">
<label for="styled-checkbox-1">Option 1</label>
<input type="checkbox" id="styled-checkbox-2">
<label for="styled-checkbox-2">Option 2</label>
<input type="checkbox" id="styled-checkbox-3">
<label for="styled-checkbox-3">Option 3</label>
<input type="checkbox" id="styled-checkbox-4">
<label for="styled-checkbox-4">Option 4</label>
</div>
</body>
</html>
Output
How to Change the Checked Mark Color of a Checkbox using CSS?Conclusion
Checkboxes are crucial for user selections on websites, but their default appearance may not fit the site’s design. By using CSS techniques like appearance: none, pseudo-elements, the accent-color property, custom background images, and box-shadow, the checkbox and its checked mark can be easily customized to match the site's style and improve the user experience.
Similar Reads
How to Change the Checkbox Background Color in CSS?
Change the checkbox background color in CSS by hiding the default checkbox and using custom styles with the ::before and ::after pseudo-elements. This involves creating a custom checkbox that looks and works just like a regular checkbox but with your own design.Below are the approaches to change the
2 min read
How to Change the Color of Bullets using CSS?
Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency.1. Adding An Extra MarkupBy adding
2 min read
How to Change the Color of Link on Hover using CSS ?
Changing the color of a link on hover can provide visual feedback to users, indicating that the link is interactive. It improves the user experience by helping users understand that the link is clickable. These are the following approaches: Table of Content Using CSS pseudo-classUsing CSS VariablesU
2 min read
How to Make a Toggle Button using Checkbox and CSS ?
Toggle means switching actions from one state to another. In simple words, when we switch from one state to the other state and back again to the former state we say that we are toggling. In this article, we are using the checkbox and CSS to create a toggle button. In web development, we can use thi
3 min read
How to change the color of an icon using jQuery ?
In this article, we will see how to change the color of the icon using jQuery. To change the color of the icon, we will use a jquery method. jQuery css() method this method is used to change the styling of a particular selector. This method is also can be used for changing the color of the icon. Fir
2 min read
How to Change the Color of Radio Buttons using CSS?
Here are three methods to change the color of radio Buttons using CSS:1. Using the accent-color PropertyThe accent-color property allows you to set the color of form controls like radio buttons and checkboxes.HTML<html> <head> <style> input[type="radio"] { accent-color: green; }
3 min read
How to align checkboxes and their labels on cross-browsers using CSS ?
For aligning the checkboxes or radio buttons with their labels can be achieved in many ways. Some of the simplest methods to achieve this are described below with proper code and output in different browsers. Now styling can be done in various ways to align the checkboxes and their labels. For this
2 min read
How to get the background color of a clicked division using jQuery ?
In this article, we will learn how to get the background color of a clicked division using jQuery. Approach: All the divisions on the page are first selected using a common selector and a click binding is applied to trigger the color detection using the click() method. The division that is then curr
2 min read
How to Change the Background Color of Table using CSS?
Changing the background color of a table using CSS can help improve the visual appearance of a website or web application. we will learn how to change the background color of the table using CSS with different approaches.These are the following approaches:Table of Content Using Inline CSSUsing Inter
2 min read
How to style a checkbox using CSS ?
Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo
3 min read