修改 el-select 背景图 样式

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

1. 原图------------效果图

修改 el-select 背景图 样式,elementui,css,vue.js,前端,javascript修改 el-select 背景图 样式,elementui,css,vue.js,前端,javascript

 2.  css

/***********大的背景图***************/
.el-popper.is-pure {
    background: url(/src/assets/imgList/memuBG.png) no-repeat;
    border: none;
    background-size: 100% 100%;
}


/*********选中行的字体***********/
.el-select-dropdown__item.selected {
    color: #ffffff;
    font-weight: 700;
}

/*************选中行的背景色****************/
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #5793e1;
}

 文章来源地址https://www.toymoban.com/news/detail-663409.html

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

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

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

相关文章

  • Vue+ElementUI el-select选择器:绑定的值为对象

    业务需求: el-select选择器,后台接口需要的参数为name,name会存在重复情况,前端唯一标识选择用id,所以最后决定使用select绑定对象值将数据保存下来。 实现思路: 常规的select选择器,v-model 形式绑定的参数只能是boolean,string,number,但是仔细翻阅官方文档发现,selelct是可以

    2024年02月14日
    浏览(43)
  • vue+elementUI el-select 中 没有加clearable出现一个或者多个×清除图标问题

    1、现象:下方截图多×清除图标了 2、在全局common.scss文件中加一个下方的全局样式noClear 3、在多×清除图标的组件上层div加noClear样式 4、 ×清除图标去除成功

    2024年01月19日
    浏览(48)
  • Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

            在大屏开发中,比如将1920*1080放到更大像素(3500*2400)大屏上演示,此时需要使用到transform来对页面进行缩放,但是此时发现弹框定位出错问题,无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的el-date-picker /组件修复定位问题,经过网友不断发现和提

    2024年01月19日
    浏览(47)
  • 最简单的使用css修改element-ui的el-select的高度

    个人博客同步csdn 首先给el-select的容器上面自定义一个类名,避免污染别的el-select 写css,注意这里用了less 效果图(前) 效果图(后)

    2024年02月12日
    浏览(38)
  • Element VUE修改 el-input和el-select长度

     没有设置样式之前,采用默认样式,界面如下:  模拟代码如下  为了美观需要修改下样式,使文本框与下拉框的长度一致 第一种:添加style属性,采用行内样式修改长度  第二种:添加class属性,采用内部样式  stule标签中设置长度 第三种:找到element-ui.scss,采用外部样式

    2024年02月11日
    浏览(54)
  • 【Vue2 + ElementUI】更改el-select的自带的下拉图标为倒三角,并设置相关文字颜色和大小

    效果图 实现 总结 将el-select自带的下拉选择图标(如下图 1- 箭头),替换成自定义图标(如下图 2- 倒三角) (1)利用控制台找到 图 1 所在的位置,如下该图标是通过 伪类元素 添加的。 (2) 替换为 图 2   ① 只更改图标,不更改大小 在图标库(例 elementUI)找对应的图标

    2024年01月25日
    浏览(47)
  • 【elementUI】el-select相关问题

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

    2024年01月21日
    浏览(46)
  • elementUI --- el-select 下拉框 日历 级联选择

    element UI 组件库中的 select 选择器 中下拉列表的样式,在页面渲染的时候,总是渲染为仅次于body级别的div ,这样子覆盖样子会影响全局其他的select选择器下拉框样式,试图通过给el-select加父标签来覆盖,然而并没有卵用。 控制台看到的渲染结果: 解决方法: 通过 popper-cla

    2024年02月15日
    浏览(49)
  • 【elementUI】el-select选择框位置错位、偏移bug

    在el-select组件中,可能会由于option选项过多而导致下拉框位置错乱、偏移的情况,我个人试验大概是在5-6个option以上时,该bug就会出现。 这个时候需要手动为下拉框设置: popper-append-to-body=\\\"false\\\" 属性,并设置以下CSS样式解决问题:

    2024年02月15日
    浏览(47)
  • el-select 右侧icon样式问题

    el-select 右侧icon样式问题 样式问题如图: 解决方法: 注意:样式需写在没有scoped的style标签里

    2024年02月15日
    浏览(34)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包