html - 使用日期输入删除 vuetify v-text 字段上的向下箭头

Question

我正在尝试删除向下箭头，我已尝试应用此处提供的样式: Remove background arrow from date input in Google Chrome v20 .
出于某种原因，我似乎无法定位正确的元素。这是代码:

    <template>
        <v-layout justify-start align-center>
          <v-flex sm6 md4>
            <v-text-field
              class="unstyled"
              type="date"
              v-model="rawDate"
              :rules="rules"
              :key="reloadKey"
              ref="dinput"
              maxlength="10"
            >
            </v-text-field>
          </v-flex>
        </v-layout>
      </template>
     <style scoped>
       .unstyled::-webkit-inner-spin-button,
       .unstyled::-webkit-calendar-picker-indicator {
          display: none;
          -webkit-appearance: none;
      }
    </style>

如何将样式应用于正确的元素？ 我可以在开发工具中看到 unstyled 类应用于父组件，但未应用于我尝试定位的输入元素。

Answer 1

所以这可以在相当长的时间内完成，只需像这样将后代定位得越来越远:

 .unstyled, .v-input > .v-input-control > .v-input-slot > .v-text-field__slot > input > ::-webkit-inner-spin-button, ::-webkit-calendar-picker-indicator {
      display: none;
      -webkit-appearance: none;
    }

有趣的是，如果我将 scoped 放在样式标签上，它会隐藏整个日期输入，我根本看不到任何东西。