Vuetify：如何在 v-select 组件中指定所选项目的背景颜色答案

【问题标题】：Vuetify: How to specify the background-color of a selected item in v-select componentVuetify：如何在 v-select 组件中指定所选项目的背景颜色
【发布时间】：2022-02-03 17:38:47
【问题描述】：

我在 Vue 应用程序中有一个 v-select 小部件（组合框/选择）。当我打开它并将鼠标悬停在一个选项上时，该选项的背景颜色会突出显示（当前为浅灰色）。当鼠标箭头悬停在选项上时，我希望背景颜色具有不同的颜色。我看不到支持此功能的 v-select 小部件的属性。有没有办法做到这一点？

v-select::hover {
  background-color: "#00857A";
}

<v-select
    append-icon="../assets/img/sy-arrow-chevron-down.svg"
    background-color="white"
    :height="68"
    item-text="label"
    item-value="key"
    class="mr-3"
    v-model="type"
    :width="421"
    :items="searchCriteria"
    @change="performSearch()"
  ></v-select>

【问题讨论】：

标签： background-color vuetify.js selected v-select

【解决方案1】：

将item-color属性添加到v-select

【讨论】：

【解决方案2】：

定义颜色：

.v-list-item--link::before { background-color: red; }

定义不透明度：

.theme--light.v-list-item:hover::before { opacity: 0.64; }

【讨论】：

添加这些样式没有区别。
这对我来说非常有用，但是 before 元素是透明的并且漂浮在 .v-list-item__title 上。我想要一个完全不透明的颜色来隐藏文本。我不得不添加 z-index: 1;悬停时查看文本。

【解决方案3】：

我猜这是官方修改Vuetify的方式：https://next.vuetifyjs.com/en/customization/theme

【讨论】：

这是正确的解决方案。在整个应用程序中保持所有颜色的颜色相同是有意义的。

【解决方案4】：

在悬停时为列表项添加样式：

div.v-select-list div[role=list] div[role=listitem]:hover {
    background-color:#00857A;
  }

所选选项的背景将变为深绿色

【讨论】：

【解决方案5】：

也许这可以帮助你，它对我有用

.theme--light.v-text-field--solo > .v-input__control > .v-input__slot {
    background:#9d2449 !important;
    color: white !important;
   
}

.theme--light.v-label {
    color: rgb(252, 252, 252);
}

.theme--light.v-select .v-select__selection--comma {
    color: rgba(255, 255, 255, 0.87);
}

【讨论】：

虽然这可能会回答问题，但最好给出解释，而不仅仅是为您的答案编写代码。

【解决方案6】：

使用：

::v-deep 访问 css。

::v-deep .v-list-item--link::before { background-color: red;  }

::v-deep .theme--light.v-list-item:hover::before { opacity: 0.64; }

【讨论】：