Vue Multiselect组件样式自定义：如何修改选项高度等样式

我已经引入Vue Multiselect组件并添加了部分CSS样式，但仍无法实现全部自定义需求，比如修改选项高度、选择框高度、选中项颜色及关闭按钮颜色等。请问这些元素对应的类名是什么，该如何进行样式修改？

当前组件代码 #

<multiselect
  v-model="value"
  :options="options"
  :multiple="true"
  :close-on-select="false"
  :clear-on-select="false"
  :preserve-search="true"
  :hide-selected="true"
  :option-height="10"
  class="min-w-200 w-full mb-2"
  open-direction="bottom"
  placeholder="--Select One or More--"
  :show-labels="false"
  label="name"
  track-by="name"
  :preselect-first="true"
>
  <span
    slot="selection"
    slot-scope="{ values, search, isOpen }"
    class="multiselect__single"
    v-if="values.length && !isOpen"
    >{{ values.length }} options selected</span
  >
</multiselect>

现有CSS代码 #

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
<style lang="scss" >
.multiselect__tag {
  color: rgb(48, 48, 48);
  background-color: rgba(var(--vs-primary), 0.3);
  font-size: 01rem;
}
.multiselect__tag:hover {
  background-color: rgba(var(--vs-warning), 0.3);
}

.multiselect__option--disabled {
  background: purple;
  color: rgba(var(--vs-primary), 1);
  font-style: italic;
}

.multiselect__option--highlight {
  background-color: rgba(var(--vs-primary), 1);
  color: rgb(255, 255, 255);
  font-size: 0.9rem;
  height: 1rem;
}

.multiselect__content {
  background: rgb(255, 255, 255);
  color: #444;
  font-size: 0.9rem;
}
.multiselect__single {
  height: 0.8rem;
  font-size: 01rem;
  color: #444;
}
.multiselect__tag {
  position: relative;
  display: inline-block;
  padding: 0.25rem 1.625rem 0.25rem 0.625rem;

  margin-right: 0.625rem;

  line-height: 1;

  margin-bottom: 0.5rem;
}
</style>

以下是你需要的自定义样式对应的类名及修改示例：

1. 修改选项高度 #

组件自带的 :option-height 属性需传入像素数值（比如32而非10，避免高度过小），也可通过CSS类强制调整：

.multiselect__option {
  height: 32px; /* 自定义选项高度 */
  line-height: 32px; /* 保持文字垂直居中 */
}

2. 修改选择框高度 #

选择框由multiselect__input和multiselect__tags共同控制，需同时调整：

.multiselect__input,
.multiselect__tags {
  min-height: 40px; /* 自定义选择框高度 */
  padding: 8px 12px; /* 调整内边距适配高度 */
}

3. 修改选中项（标签）颜色 #

直接在multiselect__tag类下调整即可，可扩展边框样式：

.multiselect__tag {
  background-color: #2563eb; /* 自定义标签背景色 */
  color: #ffffff; /* 自定义标签文字色 */
  border: 1px solid #1d4ed8; /* 可选：标签边框色 */
}

4. 修改关闭按钮（标签移除按钮）颜色 #

关闭按钮对应multiselect__tag-icon类，可修改默认及hover状态：

.multiselect__tag-icon {
  color: #ffffff; /* 默认关闭按钮颜色 */
}
.multiselect__tag-icon:hover {
  color: #ef4444; /* hover时的按钮颜色 */
  background-color: rgba(255,255,255,0.2); /* 可选：hover时的背景色 */
}

5. 额外：下拉列表中已选中选项的样式 #

若需修改下拉列表内已选中选项的高亮样式，使用multiselect__option--selected类：

.multiselect__option--selected {
  background-color: #dbeafe; /* 已选中选项背景色 */
  color: #1e40af; /* 已选中选项文字色 */
}

注意：如果样式不生效，可能是Vue样式作用域导致，可移除<style>标签的scoped属性，或使用深度选择器（如::v-deep .multiselect__option）穿透作用域。

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