新的标题：修改复选框的选中标记颜色

Question

我已经实现了一个功能来更改复选框的背景颜色，但它使刻度线变成黑色，这是我不想要的，我希望标记仍然是白色，我该如何实现这一点？

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>

这是函数：-

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

这是输出：- 背景更改成功，但刻度线更改为黑色

Answer 1

使用 vue 的优点是构建自定义组件。所以你可以尝试如下所示的方法。

工作StackBlitz

您可能需要根据您的具体要求调整代码。

<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>

重要

将以下内容添加到您的index.html标头

<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

默认 HTML 复选框的刻度线颜色由浏览器决定，无法更改。不过，您可以创建自己的自定义复选框并根据需要设置样式。

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