无法检查元素时，如何修改v-autocomplete占位符的文本样式？

问题说明 #

我的应用里，v-autocomplete组件仅在点击导航栏按钮后才显示，用于演员搜索，占位符为“Search on actors”。当前占位符是黑色常规字体，需要改成白色斜体，但无法通过元素检查工具定位到对应的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
            multiple
            @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>

解决方案 #

针对Vuetify的filled样式v-autocomplete，可以通过以下CSS规则修改占位符样式：

方法1：使用Vue深度选择器（适用于scoped样式）

如果你的样式是scoped的，需要用::v-deep（Vue2）或:deep()（Vue3）穿透作用域，定位到占位符元素：

/* Vue 2 */
::v-deep .v-input--filled .v-input__slot .v-label--placeholder {
  color: white;
  font-style: italic;
}

/* Vue 3 */
:deep(.v-input--filled .v-input__slot .v-label--placeholder) {
  color: white;
  font-style: italic;
}

方法2：给组件添加自定义类，避免全局污染

先给v-autocomplete添加自定义类actor-search-autocomplete：

<v-autocomplete
  class="actor-search-autocomplete"
  <!-- 其他属性保持不变 -->
>
</v-autocomplete>

然后编写对应的CSS（scoped模式下同样需要深度选择器，全局样式则不需要）：

/* 全局样式或scoped下配合深度选择器 */
.actor-search-autocomplete .v-input__slot .v-label--placeholder {
  color: white;
  font-style: italic;
}

补充说明 #

• 因为你用了filled属性，所以对应的输入框会带有v-input--filled类，占位符标签会被加上v-label--placeholder类，通过这些类组合就能精准定位到目标元素。
• 如果上述选择器不生效，可以尝试增加选择器的优先级，比如在选择器前加上父容器类.inspire：

.inspire .v-input--filled .v-input__slot .v-label--placeholder {
  color: white !important;
  font-style: italic;
}

内容的提问来源于stack exchange，提问作者Quentin