Question

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

C:\Users\XXXX\AppData\Roaming\

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

Answer 1

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

Answer 2

定义颜色：

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

定义不透明度：

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

Answer 3

在悬停时为listitem添加样式：

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

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

Answer 4

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

Answer 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);
}

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

5 个答案: