vue3—elementPlus如何单独修改页面中的下拉框样式

最新推荐文章于 2024-07-25 11:24:09 发布

草莓味的代码

最新推荐文章于 2024-07-25 11:24:09 发布

阅读量4.3k

点赞数 7

文章标签： 1024程序员节 vue.js

本文链接：https://blog.csdn.net/qq_52721978/article/details/127493256

版权

vue3中只能去修改popper-class这个属性去修改（自己想要的样式）重点 :样式修改不能写在scoped中，可以单独开个style

popper-class="blueBack"（blueBack为自定义class名）

 <el-select popper-class="blueBack">
      <el-option />
 </el-select>

单独写的css 样式(不单独写不生效)

<style lang="less">
.el-popper.is-light.blueBack {
    background-color: #254277 !important;
    border: 1px solid #254277 !important;
}

.blueBack.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before {
    background: #254277 !important;
    border: 1px solid #254277 !important;
}

.blueBack.el-popper[data-popper-placement^=top] .el-popper__arrow::before {
    background: #254277 !important;
    border: 1px solid #254277 !important;
}

.blueBack {

    .el-select-dropdown__item.hover,
    .el-select-dropdown__item:hover {
        background: #2A77C6 !important;
    }

    .el-select-dropdown__item {
        color: #B3BCCE !important;
    }

    .el-select-dropdown__item.selected {
        background: #2A77C6 !important;
    }
}

修改下拉框的边框

  :deep(.el-input__wrapper) {
    background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%);
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
            }

    :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
                box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
            }

   :deep(.el-select .el-input.is-focus .el-input__wrapper) {
                box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important;
            }

   :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) {
                background: #0b3571;
            }

    :deep(.el-select .el-input__wrapper) {
                background: #0b3571;
            }

效果展示