css - 更改边框自动完成 vuetify

Question

我的 codepen 上有 vuetify 1.5.x。正如您在我的 codepen 中看到的，自动完成的线很粗。我只希望那条线只有 1px。我希望选择字段（轮廓边框）为border: 1px solid red. 我尝试检查元素并查看该类，然后编写如下代码：

.theme--light.v-select-list v-card {
  border: 1px solid red;
}

此代码不起作用。我尝试使用此代码的另一种方式：

theme--light.v-select-field--outline > .v-input__control > .v-input__slot {
  border: 1px solid red;
}

这段代码也不起作用。我该怎么办？

标签： cssvuetify.js

Answer 1

在您的全局或组件中覆盖style

.v-text-field--outline.v-input--has-state>.v-input__control>.v-input__slot, 
.v-text-field--outline.v-input--is-focused>.v-input__control>.v-input__slot,
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover {
    border: 1px solid !important;
}
.theme--light.v-text-field--outline>.v-input__control>.v-input__slot {
    border: 1px solid !important;
}