去掉 v-select 中的空 space

Question

我使用 Vuetify，对访问 v-select 输入的样式有疑问。实际结果：

期望的结果是去掉点和箭头之间的space。

我检查了 official docs，但没有帮助。

<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

您需要覆盖其中一个嵌套元素的现有样式。

将此添加到样式中（来自您的代码笔的示例）：

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

我建议将特定的 class（例如 wide-text-area 或其他）添加到 v-select 元素并在 CSS 中指定它，这样样式就不会无意应用于所有元素。

去掉 v-select 中的空 space

Get rid of empty space in v-select

sass

vuetify.js

v-select