how to remove padding from v-select

[This is my code]

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

CodePudding user response：

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().

CodePudding user response：

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/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-select
          :items="cities"
          
          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"
          
          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/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>