Vuetify: How to specify the background-color of a selected item in v-select component

情到浓时终转凉″ 提交于 2020-01-24 21:36:05

问题


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>

回答1:


Define color:

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

Define opacity:

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




回答2:


Add a style for listitem on hover:

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

and the background of the selected option will be colored darkgreen




回答3:


I guess this is the official way to modify Vuetify: https://next.vuetifyjs.com/en/customization/theme



来源:https://stackoverflow.com/questions/57361274/vuetify-how-to-specify-the-background-color-of-a-selected-item-in-v-select-comp

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!