Vuetify：如何在 v-select 中设置所选项目的背景颜色答案

【问题标题】：Vuetify : How to set selected item background color in v-selectVuetify：如何在 v-select 中设置所选项目的背景颜色
【发布时间】：2021-04-26 23:49:21
【问题描述】：

我有这个 v-select，我想将所选项目的背景颜色更改为“白色”，并将文本颜色保持为蓝色

我尝试将 item-color 属性添加到我的 v-select 中，但它会更改背景和文本颜色，因此我们无法再看到文本。我也尝试添加这样的范围样式，但它不起作用:(

.v-list-item--active {
  background-color: white !important;
}

有人可以帮忙吗？

【问题讨论】：

标签： css nuxt.js vuetify.js v-select

【解决方案1】：

我通过使用 v-select 的 item 属性并在其中放置一个 v-list-item 来实现这一点。

<v-select
  :items="[1,2,3]"
  multiple
>
  <template v-slot:item="{item, on, attrs}">
    <v-list-item v-on="on">
      <v-list-item-action>
        <v-simple-checkbox
          :value="attrs.inputValue"
          v-on="on"
          color="primary"
          :ripple="false"
        ></v-simple-checkbox>
      </v-list-item-action>
      <v-list-item-content>
        <v-list-item-title :class="attrs.inputValue ? 'primary--text' : ''">
          {{ item }}
        </v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </template>
</v-select>

attrs.inputValue 保存我用来在 v-list-item-title 上设置 primary--text 类的项目的选定状态。

仅供参考：v-simple-checkbox 上的 :ripple="false" 属性对于防止控制台中的错误是必要的，因为在此组件上有一个带有波纹指令的打开 bug。

【讨论】：

【解决方案2】：

真的不知道它是否是您正在寻找的效果，但为了保留暗模式，您应该改为从活动元素中移除不透明度

.v-list-item--active::before { opacity: 0 }

请记住，此规则适用于所有活动的列表项。

如果您想在单个选择或仅在选择上执行此操作，您应该定位您想要的元素


/* Examples */

.v-select .v-list-item--active::before { opacity: 0 }
.v-select--is-multi .v-list-item--active::before { opacity: 0 }
.my-pale-select  .v-list-item--active::before { opacity: 0 }

【讨论】：

【解决方案3】：

试试这个：

.v-list .v-list-item--link:before{
  background-color: #fff !important;
}

Here 很简单。

【讨论】：