Get rid of empty space in v-select

Question

I use Vuetify and have a question about access to styles of v-select input. Actual result:

The desired result is to get rid of space between dots and arrow.

I went through the official docs, but it didn't help.

<div id="app">
  <v-app id="inspire">
    <v-container fluid>
      <v-row align="center">
        <v-col cols="1">
          <v-select
            v-model="select"
            :items="items"
            item-text="state"
            return-object
            single-line
          ></v-select>
        </v-col>
      </v-row>
    </v-container>
  </v-app>
</div>

The full code example

Answer 1

You need to override the existing style of one of the nested elements.

Add this to the style (example from your codepen):

.v-select__selection.v-select__selection--comma {
  max-width: 100% !important;
  margin-right: 0 !important;
}

I'd recommend adding a specific class (e.g. wide-text-area or something) to the v-select element and specify it in the CSS so the style doesn't apply to all elements without intention.