Neuer Titel: Farbe des Kontrollkästchens ändern

Question

Ich habe eine Funktion implementiert, um die Hintergrundfarbe des Kontrollkästchens zu ändern, aber dadurch werden die Häkchen schwarz, was ich nicht möchte. Ich möchte, dass die Markierungen weiß bleiben. Wie kann ich das erreichen?

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>

Das ist die Funktion:-

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

Das ist die Ausgabe:- Der Hintergrund wurde erfolgreich geändert, aber die Häkchen wurden schwarz

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