Изменить цвет v-select выбранного элемента, используя CSS - PullRequest
Новая
       5

Изменить цвет v-select выбранного элемента, используя CSS

0 голосов
/ 08 апреля 2020

У меня есть следующий 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, а не S CSS, спасибо.

1 Ответ

0 голосов
/ 08 апреля 2020

Вы можете изменить 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>
...