Change checkbox tickmark color

I’ve implemented a function to change the background color of my checkbox , but it makes the tickmark turns to color black which I don’t want , I want the mark to still white , how can I achieve this ?

HTML :-

<div v-for="category in categories" :key="category.id">
     <div>
        <input type="checkbox" class="categoryInput" @change="input()" 
        :true-value="category.id" false-value="0" v-model="currentCategory"/>
        <label class="form-label">{{category.name}}</label>
      </div>
</div>

here’s the function :-

input(){
        var color = JSON.parse(localStorage.getItem('coloring') || '[]').CTAButtons
        let collection = document.getElementsByClassName("categoryInput");
        for (let i = 0; i < collection.length; i++) {
        collection[i].style.accentColor = color
        }
    }

and here’s the output :- the background changed successfully but the tickmark changed to color black

Answer

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