How to remove padding from v-select component in vuetify

Question

how to remove padding from v-select

[This is my code]

<v-select
  :items="cities"
  class="select--menu"
  label="Solo field"
  solo
  hide-details
  hide-selected
  dense
  append-icon="mdi-chevron-down"
  prepend-icon="mdi-map-marker-outline"
></v-select>

Answer 1

Try like following snippet:

 new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { cities: [1,2,3] } } })

 .my-select .v-input__slot { padding: 0 !important; }

 <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@6.x/css/materialdesignicons.min.css" rel="stylesheet"> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet"> <div id="app"> <v-app> <v-main> <v-container> <v-select :items="cities" class="select--menu my-select" label="without padding" solo hide-details hide-selected dense append-icon="mdi-chevron-down" prepend-icon="mdi-map-marker-outline" ></v-select> </v-container> <v-container> <v-select :items="cities" class="select--menu" label="with padding" solo hide-details hide-selected dense append-icon="mdi-chevron-down" prepend-icon="mdi-map-marker-outline" ></v-select> </v-container> </v-main> </v-app> </div> <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>

Answer 2

If I remember correctly, vuetify uses its own custom components. To enter the vue components styling from a parent component, you need to use vues deep-selector : https://www.telerik.com/blogs/understanding-vue-deep-css-selector

Depending on which version you use, it is >>> , ::v-deep or even :v-deep() .