Vuetify 1.5.x（Codepen）Autocomplete边框样式修改求助

针对你遇到的Vuetify 1.5.x版本中Autocomplete组件线条过粗、自定义边框样式无效的问题，我整理了精准的解决方案，同时解释下你之前写法失效的原因：

一、修改输入框（轮廓样式）的边框为1px红色 #

Vuetify 1.5中，带轮廓样式的Autocomplete（基于v-select）的边框样式会根据组件状态（默认、聚焦）有不同的内置样式，所以需要覆盖这两种状态的样式，同时保证选择器优先级足够：

方法1：使用自定义类（推荐，避免!important） #

先给你的Autocomplete组件添加自定义类：

<v-autocomplete
  class="custom-autocomplete"
  outlined
  <!-- 其他组件属性 -->
></v-autocomplete>

然后编写CSS：

/* 默认状态下的边框 */
.custom-autocomplete.theme--light.v-select--outline .v-input__slot {
  border: 1px solid red;
}
/* 聚焦状态下的边框（避免聚焦时样式被内置样式覆盖） */
.custom-autocomplete.theme--light.v-select--outline.v-input--is-focused .v-input__slot {
  border: 1px solid red;
}

方法2：使用!important快速覆盖 #

如果不想添加自定义类，可以用!important强制覆盖内置样式：

.theme--light.v-select--outline .v-input__slot,
.theme--light.v-select--outline.v-input--is-focused .v-input__slot {
  border: 1px solid red !important;
}

二、修改下拉列表的边框为1px #

你之前的写法.theme--light.v-select-list v-card错误在于没有用空格分隔类选择器，导致选择器无法匹配到正确的元素（实际是.v-select-list容器内的.v-card），正确写法如下：

方法1：配合自定义类 #

.custom-autocomplete .v-select-list .v-card {
  border: 1px solid red;
}

方法2：全局覆盖 #

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

为什么你之前的写法无效？ #

1. 第一个写法.theme--light.v-select-list v-card：.theme--light和.v-select-list连写表示要找同时拥有这两个类的元素，但实际.theme--light是根容器类，.v-select-list是子容器类，需要用空格分隔表示后代关系；
2. 第二个写法.theme--light.v-select-field--outline > .v-input__control > .v-input__slot：Vuetify 1.5中没有v-select-field--outline这个类，正确的类名是v-select--outline，而且没有覆盖聚焦状态的样式，导致聚焦时内置样式覆盖了你的自定义样式。

内容的提问来源于stack exchange，提问作者Mohamad Handy Nugraha