解决/deep/ .el-select-dropdown{ }样式不生效问题

发布时间 2023-03-27 10:12:53作者: 会转圈圈的哆瑞米

原先代码如下:

/*修改下拉框背景色以及边框线样式*/
    /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值,否则会被其余页面元素覆盖,导致无法选择)

最终效果如下: