如何从 v-text 文件或 v-input 文件中删除下划线

Question

我尝试从 Vuetify 中的 v-input、v-text 或 v-autocomplete 文件中删除下划线，但我找不到如何

有什么方法可以从 Vuetify 中的 v-input、v-text 或 v-autocomplete 文件中删除下划线。

Answer 1

在 v-text 上添加“solo”和“flat”道具。适用于 v-input 和 v-autocomplete。

<v-text-field flat solo></v-text-field>

平面：vuetify 文档中的描述“使用独奏或独奏反转道具时删除添加到元素的高程（阴影）”

vuetify 中有一个游乐场，它也可以为您提供帮助。 https://vuetifyjs.com/en/components/text-fields/

这很有效，但是您可能有很多额外的间距，特别是如果它位于 v-data-table 内。添加这些其他道具将有所帮助：`flat alone class="ma-0 pa-0" hide-details` (2认同)

Answer 2

使用这里讨论的深度选择器。您必须像这样覆盖 v-input__slot::before 类：

>>> .v-input__slot::before {
  border-style: none !important;
}

它会从您在问题中指定的元素中删除下划线。如果您不想同时删除组件中的所有下划线，而只想删除某些指定的下划线，请执行以下操作：

.some-style >>> .v-input__slot::before {
  border-style: none !important;
}

并仅删除您选择的元素上的下划线：

<v-text-field class="some-style"></v-text-field>