更改el-select-dropdown_item selected选中颜色

更改el-select-dropdown_item selected选中颜色

默认为element主题色

在修改element select下拉框选中颜色时会发现不生效,原因是:el-select下拉框插入到了body中

解决办法:

在select标签里填写:popper-append-to-body="false"属性,禁止select下拉框插入到body中

html 复制代码
<el-select 
  v-model="value" 
  @change="changeProjectStatus" 
  placeholder="请选择" 
  :popper-append-to-body="false">
   <el-option
      v-for="item in tabOptions"
      :key="item.status"
      :label="item.label"
      :value="item.status">
    </el-option>
</el-select>

然后更改选中元素的颜色,就可以了

css 复制代码
::v-deep .el-select-dropdown__list .selected{
    color: #2e49ad;
  }

但是,我在另一个组件中写了却不起作用(像是被下面的元素遮挡了),最后写在了全局样式里,才显现出来,不知道什么原因?

相关推荐
你别说话了8 小时前
Vue项目解决跨域
前端·javascript·vue.js
学习星球11 小时前
Solid.js 实战:拆解官方 RealWorld 项目
开发语言·javascript·vue.js
aXin_ya17 小时前
ElementUI (01):Vue2 项目引入 ElementUI使用
elementui·vue
尚可签19 小时前
基于 Spring Boot + Vue 的 AI 智能在线订餐系统
vue.js·人工智能·spring boot
MacroZheng21 小时前
腾讯又开源了一个新项目,用起来真优雅!
前端·vue.js·人工智能
张人玉21 小时前
基于 Vue 3 + ECharts + Three.js + Express + SQLite——智慧城市数字孪生可视化平台
javascript·vue.js·信息可视化·sqlite·echarts
山川志~1 天前
Vue + Element UI 实战:如何实现表格时间、金额字段排序
vue.js·ui·elementui
_codemonster1 天前
Vue中的ref和reactive到底在干嘛
前端·javascript·vue.js
前端fighter2 天前
线上崩溃?使用 TRAE Work 5分钟把混淆日志翻译成人话并输出复盘报告
前端·vue.js·程序员
常宇佳2 天前
vue3 实战系列之无法识别vue组件
前端·javascript·vue.js