摆脱 v-select 中的空白

【问题标题】：Get rid of empty space in v-select摆脱 v-select 中的空白
【发布时间】：2021-11-14 14:05:06
【问题描述】：

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

想要的结果是消除点和箭头之间的空间。

我查看了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

【问题讨论】：

标签： sass vuetify.js v-select

【解决方案1】：

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

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

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

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

【讨论】：

干得好，有效！谢谢你。我忘了用 !important 覆盖父样式。