I have successfully updated the background color of my checkboxes using a custom function. However, the tick mark on the checkbox now turns black instead of remaining white. How can I keep the tick mark white while changing the background color?
Here is the HTML code snippet:
<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>
And here is the JavaScript function being used:
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
}
}
The background color changes successfully after running the function, but unfortunately, the tick mark on the checkboxes also changes to black. You can view the output here.