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

这篇具有很好参考价值的文章主要介绍了更改el-select-dropdown_item selected选中颜色。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

默认为element主题色

更改el-select-dropdown_item selected选中颜色,前端,vue.js,elementui
在修改element select下拉框选中颜色时会发现不生效,原因是:el-select下拉框插入到了body中
更改el-select-dropdown_item selected选中颜色,前端,vue.js,elementui
解决办法:
在select标签里填写:popper-append-to-body="false"属性,禁止select下拉框插入到body中

<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>

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

::v-deep .el-select-dropdown__list .selected{
    color: #2e49ad;
  }

更改el-select-dropdown_item selected选中颜色,前端,vue.js,elementui
但是,我在另一个组件中写了却不起作用(像是被下面的元素遮挡了),最后写在了全局样式里,才显现出来,不知道什么原因?文章来源地址https://www.toymoban.com/news/detail-595501.html

到了这里,关于更改el-select-dropdown_item selected选中颜色的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Element UI更改下拉菜单el-dropdown-menu样式

    源代码: 这个样式更改还是有点费劲的,如图: 我想更改el-dropdown-item的样式,但是正常覆盖更改无法生效的,从渲染结构可以看出来这个下拉菜单的渲染列表是在文档最底部的。 vue文件新建一个 style样式, 不加scoped; 为保证这个组件的样式 不会影响到其他页面组件样式

    2024年02月09日
    浏览(45)
  • el-select与el-tree结合使用,实现select框下拉使用树形结构选择数据

    使用el-select与el-tree,实现如下效果, 代码如下:  注意点:搜索input框的代码一点放在option上面,不要放在option里面,否则一点击搜索框,下拉框就会收起来,不能使用。

    2024年02月13日
    浏览(37)
  • el-select 使用

    案例:

    2024年02月10日
    浏览(26)
  • 修改el-select和el-input样式;修改element-plus的下拉框el-select样式

    修改el-select样式 input如下 el-input clearable v-model=\\\"name\\\" placeholder=\\\"请输入\\\" class=\\\"input-with-select input_box\\\" style=\\\"width: 148px;margin: 0 40px;position: absolute;right:67px;\\\" /

    2024年02月13日
    浏览(29)
  • el-select修改样式

    el-select 准备  注:关键 :popper-append-to-body=\\\"false\\\" 修改placeholder颜色 Element-ui下如何修改input的placeholder的颜色_呆小九的博客-CSDN博客  修改右侧箭头 在element icon里检索 修改圆角边框 el-input

    2024年02月11日
    浏览(36)
  • el-select范围选择框

    仅供参考,具体的实现可能根据自己的需要修改 ,仅供参考!仅供参考!仅供参考!

    2024年02月11日
    浏览(31)
  • el-select码值枚举

    当码值的数据是自己写的时候: 例如:isOrNo:[{label:\\\'是\\\',value:\\\'1\\\'},{label:\\\'否\\\',value:‘2’}], 当传给后端值时下拉选择是,值为1,我们当前拿到的只是值为value:1,label值为拿到,我们就需要把label值取到。 方法如下: 第一种方法: 第二种方法:

    2024年02月10日
    浏览(23)
  • el-select 分页加载

    针对数据量大的选择器,需要分页从后端接口获取数据,前端监听选择器下拉框的滚动事件,当往下滚动至底部一定位置时,调接口

    2024年02月14日
    浏览(25)
  • el-select 远程搜索 懒加载

    参考链接:el-select实现远程搜索和懒加载_select 懒加载_qd-hhkj的博客-CSDN博客 自定义懒加载 HTML 定义变量 方法

    2024年02月15日
    浏览(31)
  • 【elementUI】el-select相关问题

    :popper-append-to-body=\\\"false\\\" v-if=\\\"item.value !== form.id\\\"

    2024年01月21日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包