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

Question

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

我试图将item-color属性添加到我的 v-select 中，但它改变了背景和文本颜色，所以我们再也看不到文本了。我也尝试添加这样的范围样式，但它不起作用:(

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

任何人都可以帮忙吗？

Answer 1

我通过使用itemv-select 的道具并在其中放置一个 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保存我用来primary--text在 v-list-item-title 上设置类的项目的选定状态。

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

Answer 2

对我来说，仅当我scoped从样式块中删除时，才对 v-select 中的项目进行样式设置：

<style>
  .v-list-item--active {
     background-color: white;
  }
</style>

Answer 3

试试这个：

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

这是简单的codepen。

Answer 4

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

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