2

我在 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>
4

6 回答 6

3

item-color属性添加到v-select

于 2020-11-05T10:43:52.953 回答
2

定义颜色:

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

定义不透明度:

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

于 2019-08-05T18:13:10.630 回答
1

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

于 2019-08-07T08:06:44.667 回答
0

在悬停时为 listitem 添加样式:

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

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

于 2019-08-06T09:13:41.503 回答
0

利用 :

::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; }
于 2022-02-03T09:38:47.680 回答
0

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

.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);
}
于 2020-06-24T15:39:27.517 回答