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


最后就是我们需要的下拉框的样式了