ElementUI-vue修改下拉框的默认样式

ElementUI-vue修改下拉框的默认样式

如下图:
在这里插入图片描述
通过Dom元素可以发现,官方Select选择器下拉框是直接插入body标签中,与最外级div同级,所以在Vue中无论怎么写css都无法覆盖到下拉框样式。
在这里插入图片描述
仔细找了一下elementUI的官方文档,在这里要给select标签增加 :popper-append-to-body=“false” 属性
在这里插入图片描述
接下来的css设置就在浏览器里右击下拉框,先在浏览器里写入你需要改的样式,接下来复制到编辑器里就行。
在这里插入图片描述
在这里插入图片描述

可能只是单页面修改下拉框的样式,所以这里我用到了/deep/这个方法,让其他页面的下拉框样式不会污染。
因为项目需要,下拉框的placeholder属性用到了浏览器兼容
在这里插入图片描述

最后一步,下拉框的三角形UI需要修改一下。。。
在这里插入图片描述
这里需要说明一下,此处是适用elementUI本身带的icon,
在这里插入图片描述需要修改成自己需要的样式,可以去阿里矢量图标库,我要是用的是正三角形,搜索到我需要的三角形,加入购物车,添加一个新项目,
在这里插入图片描述然后点击Font-class,点击生成代码,
在这里插入图片描述接着复制生成的代码,
在这里插入图片描述返回编辑器,在项目中引入刚刚复制的代码。接下来就是替换icon了。
在这里插入图片描述
在这里插入图片描述
最后就是我们需要的下拉框的样式了
在这里插入图片描述

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值