css - 更改边框自动完成 vuetify

Question

我的 codepen 上有 vuetify 1.5.x .正如您在我的代码笔中看到的那样，自动完成的行很粗。我只希望那条线只有 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;
}

这段代码也行不通。我应该怎么办？

Answer 1

覆盖全局或组件样式

.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;
}