去掉v-select中的空格

Question

我使用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

Answer 1

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

​

​

将此代码添加到样式中(来自您的代码的示例)：

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

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