Vuetify:如何在v-select组件中指定所选项目的背景色 [英] Vuetify: How to specify the background-color of a selected item in v-select component

问题描述

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

I have a v-select widget (combobox / select) in a Vue application. When I open it and hover over an option, the background-color of the option is highlighted (currently light-grey). I want the background-color to have a different color when the mouse arrow hovers over an option. I can not see a property of the v-select widget that supports this. Is there a way to achieve this?

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>

推荐答案

也许对您有帮助，对我有用

Maybe this can help you, it worked for me

.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组件中指定所选项目的背景色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！