如何移除Vuetify中v-select组件的下划线样式

你之前的CSS没有命中正确的元素——Vuetify的underlined变体下划线是通过.v-input__slot的伪元素生成的，而非.v-input__control的边框或阴影。以下是两种正确的实现方式：

方式一：仅移除指定v-select的下划线（推荐） #

你已经给v-select添加了no-border类，直接针对这个类编写精准的CSS：

.no-border.v-input--underlined .v-input__slot::before,
.no-border.v-input--underlined .v-input__slot::after {
  display: none;
}

这样只会影响带有no-border类的v-select，不会干扰页面上其他同类型组件。

方式二：全局移除所有underlined类型v-select的下划线 #

如果你需要全局移除所有使用variant="underlined"的v-select下划线，可以用：

.v-input--underlined .v-input__slot::before,
.v-input--underlined .v-input__slot::after {
  display: none;
}

补充说明 #

• ::before对应组件默认状态下的下划线，::after对应聚焦时的高亮下划线，两者都需要处理才能完全移除下划线效果
• 不需要使用!important，通过组合组件类和自定义类的选择器，优先级已经足够覆盖Vuetify的默认样式

内容的提问来源于stack exchange，提问作者Badrudin