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

Posted 2023-02-22

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

【英文标题】：How to remove underline from v-text filed or v-input filed

【发布时间】：2020-10-27 17:43:46

【问题描述】：

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

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

【参考方案1】：

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

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

Flat：来自 vuetify 文档的描述 "在使用独奏或独奏倒置道具时移除添加到元素的高程（阴影）"

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

【讨论】：

这很好用，但你可能有很多额外的间距，尤其是在 v-data-table 中。添加这些其他道具将有所帮助：flat solo class="ma-0 pa-0" hide-details

【参考方案2】：

使用here 讨论的深度选择器。您必须像这样覆盖 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>

【参考方案3】：

花点时间在这个你需要覆盖之前的 css 样式

.v-text-field > .v-input__control > .v-input__slot:before 
  border-style: none;