vuetify- How do I change arrow color and the size of the icon in vuetify within text-area?

Question

I'm trying to make a text input area like this.

I tried this way

        <v-text-field
          label="Outlined"
          placeholder="Placeholder"
          background-color="white"
          append-icon="mdi-arrow-right x-large primary"
          outlined
        ></v-text-field>

And it give me this result.

Issues are

1. Icon doesn't get large enough to fill the entire text-area
2. Can't change the color of arrow stroke
3. What should I do to make this text area also receives file drag and drop?(user might want to type or sometimes drop a file to the text area

Thank you so much. Hope someone who are well knowledgeable about vuetify could help me.

Answer 1

for part of your question about input design and look you should use provided slot from the v-text-field component, this way you can achieve more and here is the vuetify documentation about this: text field icon slots

and to check what other slots is available for this component check this list: all text field slots

even though using slot would achieve a lot more than prop, to fully achieve the desired result you might need to overwrite some css styles that you can find by inspecting the element in the browser dev tool to find them out.

I made the look you wanted with the approach described above in the code below:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

.v-text-field.v-text-field--enclosed .v-text-field__details,
.v-text-field.v-text-field--enclosed:not(.v-text-field--rounded)>.v-input__control>.v-input__slot {
  padding-right: 0 !important;
}

.v-text-field--enclosed .v-input__append-inner,
.v-text-field--enclosed .v-input__append-outer,
.v-text-field--enclosed .v-input__prepend-inner,
.v-text-field--enclosed .v-input__prepend-outer,
.v-text-field--full-width .v-input__append-inner,
.v-text-field--full-width .v-input__append-outer,
.v-text-field--full-width .v-input__prepend-inner,
.v-text-field--full-width .v-input__prepend-outer {
  margin-top: 0 !important;
}

.pointer {
  cursor: pointer;
}

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-text-field label="Outlined" placeholder="Placeholder" outlined>
          <template v-slot:append>
            <v-sheet color="red" class="d-flex justify-center align-center rounded-r pointer"  width="50" height="56">
              <v-icon dark>
                mdi-arrow-right
              </v-icon>
            </v-sheet>
          </template>
        </v-text-field>
      </v-container>
    </v-main>
  </v-app>
</div>

about the drag and drop issue vuetify's v-file-input component does not natively support this behavior (for now at least) but you can read the article below to find out how to write this feature in vuetify:

Step by Step: Custom drag & drop upload component in Vuetify (Vue 2)