简体   繁体   中英

Text-color for v-autocomplete

I have a v-autocomplete that only displays after I click on a loop button in my navbar.
My application is supposed to allow the search on actors. I have a placeholder on this autocomplete and I'd like to style the appearance of it.
At the moment it is black and in regular font, I'd like it white in italic but since I can't inspect the element I can't know which class to edit in the css.

Here's my code:

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

You can style it like this-

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

color props of the vuetify v-autocomplete component shoud be a string. https://vuetifyjs.com/en/api/v-autocomplete/#props-color

So either use material color name or css color in this color props field, or use style directive style="'color:var(--textLightGrey);'" .

You could also use vuetify class heler: https://next.vuetifyjs.com/en/styles/colors/

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM