修改vuetify v-text-field 默认边框颜色与宽度样式

个人博客同步csdn

直接上代码

首先给他加一个类

然后css这样写，主要是 /deep/ 的应用

<style scoped>
/*text-field 未获得焦点时边框颜色*/
.text-field-color.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state) /deep/ fieldset {
    color: #DCDFE6;
}

/*text-field 获得焦点前hover边框颜色*/
.text-field-color.theme--light.v-text-field--outlined:not(.v-input--is-focused):not(.v-input--has-state):not(.v-input--is-disabled):hover /deep/ fieldset {
    color: #C0C4CC;
}

/*text-field 获得焦点后append图标颜色*/
.text-field-color /deep/ i {
    color: #C0C4CC;
}

.text-field-color /deep/ label {
    color: #C0C4CC;
}

/*text-field 获得焦点后边框宽度*/
.text-field-color.v-text-field--outlined.v-input--is-focused /deep/ fieldset {
    border-width: 1px;
}
</style>

效果图

修改之前

修改之后