New title: Modify checkbox checkmark color

Question

I have implemented a function to change the background color of the checkbox, but it makes the tick marks black, which I don't want, I want the marks to remain 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>

This is 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
        }
    }

This is the output:- The background change is successful but the tick marks are changed to black

Answer 1

The advantage of using vue is to build custom components. So you can try the method shown below.

WORKStackBlitz

You may need to adjust the code to your specific requirements.

<template>
  <div v-for="category in categories" :key="category.id">
    <div>
      <label class="form-label categoryInput">
        <span class="material-icons icon" v-if="isChecked(category.id)"
          >check_box</span
        >
        <span
          class="material-icons-outlined icon"
          v-if="!isChecked(category.id)"
          >check_box_outline_blank</span
        >
        <input
          type="checkbox"
          class=""
          @change="input()"
          :value="category.id"
          v-model="currentCategory"
        />
        {{ category.name }}</label
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Checkbox',
  data: function () {
    return {
      currentCategory: [],
      categories: [
        { id: 1, name: 'alpha' },
        { id: 2, name: 'beta' },
      ],
    };
  },
  props: {},
  methods: {
    isChecked(categoryId) {
      return this.currentCategory.indexOf(categoryId) !== -1;
    },
    input() {
      var color = '#3bb0a8';
      let collection = document.getElementsByClassName('categoryInput');
      for (let i = 0; i < collection.length; i++) {
        const icons = collection[i].querySelectorAll('.icon');
        icons.forEach((iconEle) => {
          iconEle.style.color = color;
        });
      }
    },
  },
};
</script>

<style scoped>
label.categoryInput {
  display: flex;
  justify-content: center;
  align-items: center;
}
label.categoryInput input[type='checkbox'] {
  width: 0;
  height: 0;
}
</style>

important

Add the following to your index.html header

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Answer 2

The default HTML checkbox tick mark color is determined by the browser and cannot be changed. However, you can 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