Answer a 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?

Answers

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>