更改样式活动v-autocomplete

eh57zj3b 于 2021-09-29 发布在 Java

关注(0)|答案(2)|浏览(340)

如果至少选择了一项，如何更改v-autocomplete的样式（边框颜色）？现在，如果焦点在字段上，样式将更改（蓝色），但如果选择了项目且焦点不在字段上，样式将变为默认（灰色）。在移除焦点后，我需要保持蓝色边框。我试图更改css，但没有成功

.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>

JavaScript css v-autocomplete vuetifyjs3

来源：https://stackoverflow.com/questions/68541618/change-style-active-v-autocomplete

2条答案

按热度按时间

vm0i2vca1#

它具有类“v-input——是脏的”。尝试在css中使用它，比如

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

赞(0）回复(0）举报 2021-09-29

cxfofazt2#

在自定义选择模板上，您可以访问所选参数，然后仅添加自定义类（如果该参数为真或假）

<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>

这里是vuetify文档的链接 v-autocomplete https://vuetifyjs.com/en/api/v-autocomplete/#api-槽

赞(0）回复(0）举报 2021-09-29

我来回答

更改样式活动v-autocomplete

2条答案

相关问题

热门标签

最新问答