Question

我有以下v-select

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
      company_roles:[{
        value: 1,
        text: 'CEO'
      },
      {
        value: 2,
        text: 'Project Manager'
      },
      ]
    }
  }
})

.v-list-item__title:hover{
  color: #ffd54f !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-row>
      <v-col cols="12" sm="12" md="6">
        <v-select :items="company_roles" label="Role in Company" solo color="yellow"></v-select>
      </v-col>
    </v-row>
  </v-app>
</div>

我可以在选择之前更改悬停颜色，但是在选择之后，如果再次打开下拉菜单，则背景和颜色为蓝色，我不知道如何更改这些颜色。我想要一个使用CSS而不是SCSS的解决方案。

Answer 1

您可以像这样修改css：

.v-list .v-list-item--active { 
  background-color: green!important; 
}
.v-list .v-list-item--active .v-list-item__title {
  color: #ffd54f !important;
}

您可以在此处根据需要更新颜色。对于演示，我添加了背景绿色和文本颜色#ffd54f

工作演示：

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return{
      company_roles:[{
        value: 1,
        text: 'CEO'
      },
      {
        value: 2,
        text: 'Project Manager'
      },
      ]
    }
  }
})

.v-list-item__title:hover{
  color: #ffd54f !important;
}

.v-list .v-list-item--active { 
  background-color: green!important; 
}
.v-list .v-list-item--active .v-list-item__title {
  color: #ffd54f !important;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-row>
      <v-col cols="12" sm="12" md="6">
        <v-select :items="company_roles" label="Role in Company" solo color="yellow"></v-select>
      </v-col>
    </v-row>
  </v-app>
</div>

使用CSS更改v选择所选元素的颜色

1 个答案: