How to reduce size of vuetify inputs(v-select/v-input)

Question

How can I make vuetify input fields(v-select/v-input) smaller? BY smaller I mean reduce inner whitespace/padding?

Here's my markup:

          <div class="d-flex selects">
            <v-select
                :items="['Accepted', 'Pending']"
                label="Accepted"
                outlined
                class="select mr-3"
            ></v-select>
            <v-select
                :items="['Oldest', 'Newest']"
                label="Oldest"
                outlined
                class="select mr-3"
            ></v-select>
            <v-text-field
              label="Date"
              persistent-hint
              append-icon="mdi-calendar"
              outlined
            ></v-text-field>
          </div>

Answer 1

vuetify js gave SASS API to change style of the component:

<style lang="scss" scoped>
$text-field-padding: 8px 0 8px !default;
</style>

this is the default style for the input component. You can tweak it as you want. you can also read about more SASS API from the link: https://vuetifyjs.com/en/api/v-text-field/#api-sass

Answer 2

You can probably use the 'dense' prop like:

<v-select
  :items="['Accepted', 'Pending']"
  label="Accepted"
  outlined
  dense
  class="select mr-3"
></v-select>

This'll reduce some space as documented here

To reduce even more, I guess you'll have to do it manually by overriding the vuetify scss or css.

Answer 3

Use this css:

.v-text-field.v-text-field--solo .v-input__control {
    min-height: 10px;
}

should consider:

• remove scoped prop from style tag (it means changes will take affect in entire of project)
• this will work just with solo prop, does not work with dens , outlined ,...

List item