Vue中如何修改select选项样式？Bootstrap-Vue下CSS修改无效

Bootstrap-Vue的form-select基于原生select和Bootstrap样式封装，直接写CSS不生效大多是样式优先级不足或scoped样式隔离导致的，以下是几种可行的修改方案：

1. 全局样式调整 #

若要统一修改所有form-select的选项样式，在全局CSS文件中添加：

/* 修改下拉选项的字体颜色与基础样式 */
.b-form-select option {
  color: #2c3e50;
  font-family: "Arial", sans-serif;
  font-size: 14px;
}

/* 可选：调整选中状态的选项样式 */
.b-form-select option:checked {
  background-color: #3498db;
  color: #fff;
}

2. 组件内scoped样式穿透 #

如果在Vue单文件组件的<style scoped>中编写样式，需要用穿透语法突破scoped隔离：

<!-- Vue 2 写法 -->
<style scoped>
::v-deep .b-form-select option {
  color: #e74c3c;
  font-weight: bold;
}
</style>

<!-- Vue 3 写法 -->
<style scoped>
:deep(.b-form-select option) {
  color: #e74c3c;
  font-weight: bold;
}
</style>

3. 单个select定制样式 #

给目标form-select添加自定义类名，实现针对性修改：

<template>
  <b-form-select class="custom-select" v-model="selected" :options="options"></b-form-select>
</template>

<style scoped>
:deep(.custom-select option) {
  color: #9b59b6;
  font-style: italic;
}
</style>

注意：原生select的下拉选项在不同浏览器渲染有差异，hover这类高级样式可能需要自定义下拉组件实现，但基础的颜色、字体大小、字体样式用上述方法均可生效。

内容的提问来源于stack exchange，提问作者FreeHuman jen