Mam następujące rozwijany

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>

Moim celem jest zmiana koloru tekstu pola po wybraniu przedmiotu. Widzę, że API pozwala mi zmienić kolor granicy, gdy jest aktywny z color i kolorami elementów listy z {x1}}, ale chcę zmienić kolor tekstowy po wybraniu elementu.

Jeśli jeszcze nie jest jasne, chcę na przykład tekst "Australia", aby być niebieskim, jak mogę to zrobić?

enter image description here

0
pinkWojak 5 październik 2020, 07:34

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć prostych CSS, aby zastąpić domyślne style Vuetify.

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>
1
Phil 5 październik 2020, 05:22