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放在样式标签上，它将隐藏整个日期输入，而我什么也看不到。

Answer 2

<p>&lt;v-text-field</p>
<p>label=&quot;Prepend inner&quot;</p>
<p>style=&quot;width: 200px&quot;</p>
<p>type=&quot;number&quot;</p>
<p>class=&quot;no-counter&quot;</p>
<p>append-icon=&quot;mdi-map-marker-radius&quot; &nbsp; &nbsp;</p>
<p>&gt;</p>
<div style="color: #d4d4d4;background-color: #1e1e1e;font-family: Consolas, 'Courier New', monospace;font-weight: normal;font-size: 14px;line-height: 19px;white-space: pre;"><span style="color: #808080;">&lt;/</span><span style="color: #569cd6;">v-text-field</span><span style="color: #808080;">&gt;</span><span style="color: #d4d4d4;">&nbsp; &nbsp;&nbsp;</span></div>

CSS：

.no-counter  input::-webkit-outer-spin-button,.no-counter  input::-webkit-inner-spin-button {
     -webkit-appearance: none;
    margin: 0;
}

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

2 个答案: