Change text color in v-select and v-autocomplete

Question

I have the following dropdowns

Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<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-autocomplete label="Country" item-color="secondary" placeholder="Country" color="#B28C81" outlined dense></v-autocomplete>

     <v-select item-color="secondary" label="Coin" placeholder="Coin" color="#B28C81" outlined dense></v-select>

  </v-app>
</div>

My goal is to change the text color of the field after I have selected an item. I see that the API lets me change the border color when it's active with color and the color of the items of the list with item-color but I want to change the text color after I select an item.

If it's not clear yet, I want the text "Australia" to be blue for instance, how could I do this?

score 3 · Accepted Answer · answered Oct 05 '20 at 05:22

You can use some simple CSS to override the default Vuetify styles.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    countries: ["Australia", "New Zealand"],
    coins: ["AUD", "NZD"]
  })
})

/*
  These are the selectors controlling the selected item
  in v-autocomplete and v-select
*/
.v-select__selection,
.v-select__selection--comma,
.v-select.v-text-field input {
  color: blue !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/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js"></script>

<div id="app">
  <v-app>
    <v-container fluid>
     <v-autocomplete :items="countries" label="Country" placeholder="Country" outlined dense></v-autocomplete>

     <v-select :items="coins" label="Coin" placeholder="Coin" outlined dense></v-select>
    </v-container>
  </v-app>
</div>

score 0 · Answer 2 · answered Aug 30 '23 at 16:53

You can use the selection slot. For example

     <v-select v-model="item" :items="items">
      <template slot="selection" slot-scope="data">
        <span :class="data.item.textColor">{{ data.item.text }}</span>
      </template>
      <template slot="item" slot-scope="data">
        <span :class="data.item.textColor">{{ data.item.text }}</span>
      </template>
    </v-select>

data

items = [ 
  { text: "First Item", value: 0, textColor: "red--text"}, 
  { text: "Second Item", value: 10, textColor: "blue--text"},
];

For more information, see the link Customizing item-text in v-select

Change text color in v-select and v-autocomplete

2 Answers2