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

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.