vue.js v-自动完成的文本颜色

vdzxcuhz  于 2022-11-30  发布在  Vue.js
关注(0)|答案(2)|浏览(238)

我有一个V-自动完成,只有在我点击导航栏中的循环按钮后才会显示。
我的应用程序应该允许搜索演员。我在这个自动完成上有一个占位符,我想设置它的外观样式。
目前它是黑色和常规字体,我希望它白色的斜体,但因为我不能检查的元素,我不能知道哪个类编辑的css。
下面是我的代码:

<template>
  <div class="inspire">
    <v-app-bar style="padding: 10px 0px;"
      color="rgba(33,33,33,255)" 
      elevation="0" 
      height="64px"
    >
      <div style="width:100%" v-if="$route.name == 'Mapping'">
        <template>
          <v-autocomplete
            v-model="valuesActor"
            placeholder="Search on actors"
            :items="actorArray"
            :search-input.sync="searchActor"
            filled
            autofocus
            mutliple
            @blur="toggleSearch"
            background-color="#313131"
            append-icon=""
            prepend-inner-icon="mdi-arrow-left"
            color="var(--textLightGrey)"
            :menu-props="{maxWidth: 1600}"
          >
          </v-autocomplete>
        </template>
      </div>  
    </v-app-bar>
  </div>
</template>
tsm1rwdh

tsm1rwdh1#

你可以这样设计-

<style scoped>
>>> ::placeholder {
    color: white !important;
    font-style: italic !important;
}
</style>
z0qdvdin

z0qdvdin2#

color props of the vuetify v-autocomplete component shoud be a string. https://vuetifyjs.com/en/api/v-autocomplete/#props-color
因此,在此color props字段中使用材质颜色名称或css颜色,或者使用style指令style="'color:var(--textLightGrey);'"
您也可以使用vuetify class heler:https://next.vuetifyjs.com/en/styles/colors/

相关问题