remove down arrow on vuetify v-text field with date input

Question

I am trying to remove the down arrow, I have tried applying the styles provided here: Remove background arrow from date input in Google Chrome v20 .
For some reason I cant seem to target the correct element. Here is the code:

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

How can I apply the styles to the correct element? I can see in the dev tools that the unstyled class is applied to a parent component but not to the input element I am trying to target.

If you are going to downvote my question it would be nice to know why??? — Michael, Dec 08 '19 at 11:50
Don't understand the downvote too, seems like a normal question, so here, take my upvote. — Ckuessner, Dec 08 '19 at 17:22

Michael · Answer 1 · 2019-12-08T13:40:29.400

So this can be done in a rather long way by simply targeting descendants further and further down like so:

 .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;
    }

Interestingly if I put scoped on the style tags it hides the entire date input and I cannot see anything at all.

score -1 · Answer 2 · edited May 17 '20 at 12:08

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

remove down arrow on vuetify v-text field with date input

2 Answers2