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

【问题标题】：Why is my css not working on v-checkbox's icon?为什么我的 css 在 v-checkbox 的图标上不起作用？
【发布时间】：2021-11-13 08:48:44
【问题描述】：

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

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

我想要这样的东西：

实际上我有这个：

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

.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

如何给它和类一样的条件，让图标变大。

【问题讨论】：

检查并检查“复选框”是否有图标类。
@NiceBooks 是的
我不确定 :class 和 class 是否可以在同一个 Vue 元素上使用。最好将它合并到一个单独的道具中，比如:class={cls1: cond1, cls2: true }

标签： javascript css vue.js vuetify.js

【解决方案1】：

好像改变了颜色和背景颜色，你应该使用对应的v-checkbox props。

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

【讨论】：

我编辑了我的问题！所以你可以看到结果

【解决方案2】：

根据Vuetify docs，您可以通过设置其属性来更改复选框的外观，如下所示（我已使用颜色选择器来匹配您的示例）

<v-checkbox
    v-model="your-model"
    label="success"
    color="#377d22"
    value="success"
    hide-details
></v-checkbox>

【讨论】：

我编辑了我的问题！所以你可以看到结果
您是否尝试将color="success" 添加到您的复选框道具中？
是的，它改变了颜色，但我想要与第一张图像完全相同的东西。带有白色按钮的绿色背景。
如果您删除您添加的自定义 CSS 会怎样？
你可以看到我的更新，几乎成功了。