Change style active v-autocomplete

Question

How i can change style (border color) of v-autocomplete if at least one item is selected? Now style is changed (blue) if focus is on the field, but become default (grey) if item is selected and focus is not on the field. I need to stay blue border after removing focus I try to change css but without success

.v-label .v-label--active .theme--light {
  color: green  !important;
  border: 1px solid red !important;
}

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>
 <template v-slot:selection="{ item, index }">
    <v-chip text-color="grey darken-4" class="indigo lighten-5">
      <span>{{ item }}</span>
    </v-chip>
  </template> 
</v-autocomplete>

score 1 · Accepted Answer · edited Jul 16 '22 at 00:44

No additional CSS is required. You could add classes as a Vue class binding:

:class="{'v-input--is-focused primary--text' : filtered.length}"

Using v-input--is-focused primary--text classes will be sufficient, so your autocomplete will look like:

<v-autocomplete
  dense
  v-model="filtered"
  :items="filters"
  :menu-props="{ maxHeight: '200' }"
  :class="{'v-input--is-focused primary--text' : filtered.length}"
  label="Filter"
  multiple
  outlined
  class="mr-md-1"
  @change="fetchFilters"
>

This code is just checking if any items are present in the filtered array.

score 0 · Answer 2 · answered Jul 27 '21 at 09:25

0

It has class "v-input--is-dirty". Try to use it in css, like

.theme--light.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:before {
    border-color: red;
}

answered Jul 27 '21 at 09:25

Marii

197
1
9

.v-text-field.v-input--is-dirty>.v-input__control>.v-input__slot:after { transform: scaleX(1); color: #1867c0 !important; } – Marii Jul 27 '21 at 11:06

score 0 · Answer 3 · answered Jul 27 '21 at 09:26

On your custom selection template you can access the selected parameter and then just add a custom class if it's true or not

<template v-slot:selection="{ item, index, selected }">
  <v-chip 
   text-color="grey darken-4" 
   class="indigo lighten-5" 
   :class=" selected ? 'customActiveClass' : '' "
  >
    <span>{{ item }}</span>
  </v-chip>
</template>

Here is the link of vuetify doc for the v-autocomplete https://vuetifyjs.com/en/api/v-autocomplete/#api-slots

In this way i can change style of item but I need to change style of box and label — Newta, Jul 27 '21 at 10:18

Change style active v-autocomplete

3 Answers3