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

时间:2024-04-12 14:53:37

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

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

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

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