原先代码如下:
/*修改下拉框背景色以及边框线样式*/
/deep/ .el-select-dropdown{
background:#07427a !important;
border: 1px solid #0098eb !important;
}
发现在网页中样式没有效果,即使加了/deep/和! important也无济于事。
解决方法:在<el-select></el-select>中添加popper-append-to-body属性,将其设置为false(不把弹出框插入至 body 元素)
<el-select :popper-append-to-body="false">
<el-option></el-option>
</el-select>
样式生效(需要注意该下拉框父级元素的z-index值必须大于其父级元素同级元素的z-index值,否则会被其余页面元素覆盖,导致无法选择)
最终效果如下
1.png