Vuetify v-file-input with icon only

Question

I'm new to Vue, and Vuetify in particular.

I want to use the v-file-input component, but I want it to have only the paperclip icon without the text box. i tried to play with the css and the directives, but I didn't manage to do that.

Any idea how?

Answer 1

https://vuetifyjs.com/en/components/file-inputs/#file-inputs

with "hide-input"

We are adding hide-input to v-file-input (from v2.3.0-beta.6)

<v-file-input multiple label="File input" hide-input></v-file-input>

https://codepen.io/yipingruan/pen/ExPPozL

Answer 2

you can use deep

<div id="app">
  <v-app id="inspire">
    <v-file-input multiple label="File input"></v-file-input>
  </v-app>
</div>


//scss
#inspire {
  /deep/ {
    .v-input__control {
      display: none;
    }
  }
}
//or
#inspire {
  ::v-deep {
    .v-input__control {
      display: none;
    }
  }
}

demo:https://codepen.io/wzc570738205/pen/ZEQQKwm

this is doc:https://vue-loader.vuejs.org/guide/scoped-css.html#mixing-local-and-global-styles