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"  @change="input()" 
        :true-value="category.id" false-value="0" v-model="currentCategory"/>
        <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

CodePudding user response：

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 >
    <input type="checkbox" checked="checked" />
    <span ></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

CodePudding user response：

The advantage of going with vue is to build custom components. So you can try something as shown below.

Working StackBlitz

You might want to tweak your code depending on your exact requirement.

<template>
  <div v-for="category in categories" :key="category.id">
    <div>
      <label >
        <span  v-if="isChecked(category.id)"
          >check_box</span
        >
        <span
          
          v-if="!isChecked(category.id)"
          >check_box_outline_blank</span
        >
        <input
          type="checkbox"
          
          @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 below 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">