CSS/HTML: How to Change The Color of The Check Mark Within The Checkbox Input

How to change the checked mark color of a checkbox in HTML?

I think this is what you want (CSS only):

DEMO

You can check this answer, the source from what I've got.

CSS:

    input[type="checkbox"]:checked + label::after {
       content: '';
       position: absolute;
       width: 1.2ex;
       height: 0.4ex;
       background: rgba(0, 0, 0, 0);
       top: 0.9ex;
       left: 0.4ex;
       border: 3px solid blue;
       border-top: none;
       border-right: none;
       -webkit-transform: rotate(-45deg);
       -moz-transform: rotate(-45deg);
       -o-transform: rotate(-45deg);
       -ms-transform: rotate(-45deg);
       transform: rotate(-45deg);
    }

    input[type="checkbox"] {
       line-height: 2.1ex;
    }

    input[type="radio"],
    input[type="checkbox"] {
        position: absolute;
        left: -999em;
    }

    input[type="checkbox"] + label {
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    input[type="checkbox"] + label::before {
       content: "";
       display: inline-block;
       vertical-align: -25%;
       height: 2ex;
       width: 2ex;
       background-color: white;
       border: 1px solid rgb(166, 166, 166);
       border-radius: 4px;
       box-shadow: inset 0 2px 5px rgba(0,0,0,0.25);
       margin-right: 0.5em;
    }

Changing color of the checkbox

I leave you a possible example: How TO - Custom Checkbox

First we hide the browser's default radio button

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

and now we create a custom radio button

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

FULL EXAMPLE

body {
  background-color: grey;
}

/* The container */

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  color: white;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default radio button */

.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
  border-radius: 50%;
}

/* On mouse-over, add a grey background color */

.container:hover input~.checkmark {
  background-color: #ccc;
}

/* When the radio button is checked, add a blue background */

.container input:checked~.checkmark {
  background-color: yellow;
}

/* Create the indicator (the dot/circle - hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */

.container input:checked~.checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */

.container .checkmark:after {
  top: 9px;
  left: 9px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: white;
}

<h1>Custom Radio Buttons</h1>
<label class="container">One
  <input type="radio" checked="checked" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Two
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Three
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>
<label class="container">Four
  <input type="radio" name="radio">
  <span class="checkmark"></span>
</label>

Cannot add color to html checkbox tick

CSS:

.check-item{
display:inline;
position:relative;
padding-left:35px;
margin-bottom:12px;
cursor:pointer;
font-size:22px;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}

.check-item input{
position:absolute;
opacity:0;
cursor:pointer
}

.checkmark{
position:absolute;
top:0;
left:0;
height:25px;
width:25px;
background-color:#eee
}

.check-item:hover input ~ .checkmark{
background-color:#ccc
}

.check-item input:checked ~ .checkmark{
background-color:#eee
}

.checkmark:after{content:"";
position:absolute;
display:none
}

.check-item input:checked ~ .checkmark:after{
display:block
}

.check-item .checkmark:after{
left:9px;
top:5px;
width:5px;
height:10px;
border:solid green;
border-width:0 3px 3px 0;
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg)
}

HTML:

<div class="mycontainer">
<label class="check-item">Apple
<input type="checkbox" value="Apple" class="checkmark">
<span class="checkmark"></span>
</label>
<label class="check-item">Orange
<input type="checkbox" value="Orange" class="checkmark">
<span class="checkmark"></span>
</label>
</div>

From here

Checkbox CSS cannot change background color for the checkbox

You can't modify checkbox color.

Instead, create pseudo elements with background custom background color, like this :

.form-check {
  position: relative;
}

input[type=checkbox] {
  width: 20px;
  height: 20px;
}

input[type=checkbox]:checked+label::before {
  content: "";
  display: block;
  position: absolute;
  text-align: center;
  height: 20px;
  width: 20px;
  left: 0;
  top: 5px;
  background-color: #FA9E57;
  font-family: "Montserrat";
  border-radius: 2px;
  border: 1px solid rgb(150 150 150 / 30%);
}

input[type=checkbox]:checked+label::after {
  content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="white" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"/></svg>');
  display: block;
  position: absolute;
  left: 3px;
  top: 3px;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="register.css">

<div class="form-group my-4">
   <div class="form-check">
     <input class="form-check-input" type="checkbox" id="privacy">
     <label class="form-check-label ml-3" for="privacy">
      Agree privacy
     </label>
   </div>
</div>

Change checkbox tickmark color

The tickmark color for the default HTML checkbox is decided by the browser and cannot be changed. You can however create your own custom checkbox and style it however you want.

HTML

<label class="container">
    <input type="checkbox" checked="checked" />
    <span class="checkmark"></span>
</label>

CSS

.container {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a teal background */
.container input:checked ~ .checkmark {
  background-color: #3bb0a8;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: '';
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

JSFiddle

Why cannot change checkbox color whatever I do?

Checkboxes are not able to be styled. You would need a third party js plugin there are many available.

If you want to do this yourself it basically involves hiding the checkbox creating an element and styling that as you want then binding its click event to two functions one to change its look and another to activate the click event of the checkbox.

The same problem will arise when trying to style that little down arrow on a drop-down select element.

How to change tickbox color in custom checkboxes in css?

The checkmark is being created using a border color, here:

.container .checkmark:after {
    border: solid white;
}

So just change that color as desired:

.container {    display: block;    position: relative;    padding-left: 35px;    margin-bottom: 12px;    cursor: pointer;    font-size: 22px;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    user-select: none;}
/* Hide the browser's default checkbox */.container input {    position: absolute;    opacity: 0;    cursor: pointer;}
/* Create a custom checkbox */.checkmark {    position: absolute;    top: 0;    left: 0;    height: 25px;    width: 25px;    background-color: #eee;}
/* On mouse-over, add a grey background color */.container:hover input ~ .checkmark {    background-color: #ccc;}
/* When the checkbox is checked, add a blue background */.container input:checked ~ .checkmark {    background-color: #2196F3;}
/* Create the checkmark/indicator (hidden when not checked) */.checkmark:after {    content: "";    position: absolute;    display: none;}
/* Show the checkmark when checked */.container input:checked ~ .checkmark:after {    display: block;}
/* Style the checkmark/indicator */.container .checkmark:after {    left: 9px;    top: 5px;    width: 5px;    height: 10px;    border: solid #000;    border-width: 0 3px 3px 0;    -webkit-transform: rotate(45deg);    -ms-transform: rotate(45deg);    transform: rotate(45deg);}

<label class="container">One  <input type="checkbox" checked="checked">  <span class="checkmark"></span></label><label class="container">Two  <input type="checkbox">  <span class="checkmark"></span></label><label class="container">Three  <input type="checkbox">  <span class="checkmark"></span></label><label class="container">Four  <input type="checkbox">  <span class="checkmark"></span></label>

---

Related Topics