更改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;
  }

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

相关推荐
前端Hardy2 小时前
字节/腾讯内部流出!Claude Code 2026王炸玩法!效率暴涨10倍
前端·javascript·vue.js
逆光如雪5 小时前
移动端卡片边框怎么做高级?我用 CSS 实现了设计师的刁钻要求
前端·css·vue.js
莹宝思密达5 小时前
地图显示西安经济开发区边界线-2023.12
前端·vue.js·数据可视化
leafyyuki6 小时前
告别 Vuex 的繁琐!Pinia 如何以更优雅的方式重塑 Vue 状态管理
前端·javascript·vue.js
Hooray7 小时前
AI 时代的管理后台框架,应该是什么样子?
前端·vue.js·ai编程
代码煮茶8 小时前
Vue3 虚拟列表实战 | 解决长列表性能问题(十万条数据流畅渲染,附原理)
前端·javascript·vue.js
计算机学姐9 小时前
基于SpringBoot的宠物店管理系统
java·vue.js·spring boot·后端·spring·java-ee·intellij-idea
布局呆星10 小时前
Vue3 —— 监听器 (watch/watchEffect) 与 Props 组件通信
vue.js·笔记·学习
橘子编程10 小时前
UniApp跨端开发终极指南
开发语言·vue.js·uni-app
计算机学姐10 小时前
基于SpringBoot的高校餐饮档口管理系统
java·vue.js·spring boot·后端·spring·intellij-idea·mybatis