Change color of v-select selected element using CSS

Question

I have the following 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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>

I could change the hover color before select, but after it's selected, if you open the dropdown again the background and the color are blue, I don't know how to change those. I would like a solution using CSS, not SCSS, thanks.

Answer 1

You can modify css like:

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

you can update the colors as per your requirement here. For demo, I have added background green and text color #ffd54f

Working Demo:

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/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>