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

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

相关推荐
qq_283720058 小时前
Python Celery + FastAPI + Vue 全栈异步任务实战
vue.js·python·fastapi
吴声子夜歌10 小时前
Vue3——Vue实例与数据绑定
前端·javascript·vue.js
一 乐11 小时前
物流信息管理|基于springboot + vue物流信息管理系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·论文·毕设·物流信息管理系统
孜孜不倦不忘初心13 小时前
Vue 项目结构与命名规范
vue.js·代码规范
账号已注销free14 小时前
Vue3项目中给组件命名的方式
vue.js
前端那点事14 小时前
VueUse 全面指南|Vue3组合式工具集实战
vue.js
前端那点事14 小时前
Vue3+Pinia实战完整版|从入门到精通,替代Vuex的状态管理首选
vue.js
Devin_chen15 小时前
Pinia 渐进式学习指南
前端·vue.js
PeterMap15 小时前
Vue组合式API响应式状态声明:ref与reactive实战解析
前端·vue.js