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

Posted 2023-02-22

【中文标题】删除带有日期输入的 vuetify v-text 字段上的向下箭头

【英文标题】：remove down arrow on vuetify v-text field with date input

【发布时间】：2020-04-01 17:25:59

【问题描述】：

我正在尝试删除向下箭头，我已尝试应用此处提供的样式： 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 类应用于父组件，但没有应用于我尝试定位的输入元素。

【问题讨论】：

如果你要否决我的问题，很高兴知道为什么？？？

也不理解投反对票，这似乎是一个正常的问题，所以在这里，接受我的投赞成票。

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

【参考方案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;