javascript - 为什么我的 css 在 v-checkbox 的图标上不起作用？

Question

我有两个图标，我正在尝试自定义它们

<v-checbkox icon class="icons" off-icon="mdi-close" on-icon="mdi-mark"></v-checkbox>

我想要这样的东西：

实际上我有这个：

我试过这个（从第一个图标的 css dev 模式得到它）：

.icons {
    background-color: red;
    color:green !important;
    font-weight: 200;
    border-radius: 2px;
}

并且font-weight不改变，color不改变图标但悬停颜色和background color是（方式）太大的正方形。

我做错了什么？

更新

Background-color给了我这个：

好的，这几乎奏效了：

    <v-checkbox
      v-model="answer.correct"
      on-icon="mdi-check"
      off-icon="mdi-close"
      color="white"
      style="border-radius:6px; width:40px; height:40px"
      :class="{ 'success': answer.correct, 'red': !answer.correct}"
      class="answer-toggle icons mr-3 pl-2 pt-2"
    ></v-checkbox>

但是白色只适用于mdi-check不mdi-close

我怎样才能给它与类相同的条件并使图标变大。

标签： javascriptcssvue.jsvuetify.js

Answer 1

它似乎改变了颜色和背景颜色，你应该使用相应的v-checkbox道具。

https://vuetifyjs.com/en/api/v-checkbox/#props