element中el-select下拉框整体样式修改

个人简介

⭐ 个人主页：我是段段‍
博客领域：编程基础、前端
写作风格：干货！干货！都是干货！
精选专栏：Vue
支持段段：点赞、收藏⭐、留言

前言

最近写项目的时候，需要对element中原有的下拉框组件进行整体样式的修改，修改完成后简单记录一下

原有组件里的el-select下拉框

这是修改完成之后的样式

页面的DOM元素也是直接使用组件中的例子

<template>
  <div class="wrap">
    <div class="dark-select">
    　　<el-select v-model="value" placeholder="请选择" :popper-append-to-body="false">
    　　　　<el-option
    　　　　　　v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            class="provinces_select"
    　　　　>
    　　　　el-option>
    　　el-select>
    div>
  div>
template>

需要注意的是el-select的popper-append-to-body属性

popper-append-to-body：

此属性是用来判断是否将弹出框（options）插入值body元素中，接受一个布尔值，默认值为true

当需要修改其样式时，可将其属性值设置为false

参数	说明	类型	可选值	默认值
popper-append-to-body	是否将弹出框插入至 body 元素。在弹出框的定位出现问题时，可将该属性设置为 false	boolean	-	true

js中的data数据也是使用官网的假数据

data() {
    return {
        options: [
            {
                value: "选项1",
                label: "黄金糕",
            },
            {
                value: "选项2",
                label: "双皮奶",
            },
            {
                value: "选项3",
                label: "蚵仔煎",
            },
            {
                value: "选项4",
                label: "龙须面",
            },
            {
                value: "选项5",
                label: "北京烤鸭",
            }
        ],
        value: ""
    };
}

最重要的是css代码，具体修改的方法如下

.wrap{
    width 100%
    height 100vh
    background-color #191c26
    padding-top 200px
}
.dark-select { 
    // 修改input默认值颜色 兼容其它主流浏览器
    /deep/ input::-webkit-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }
    /deep/ input::-moz-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }
    /deep/ input::-ms-input-placeholder {
        color: rgba(255, 255, 255, 0.50);
    }
    // input框
    /deep/ .el-select,
    /deep/ .el-input,
    /deep/ .el-input__inner {
        background-color: rgba(255, 255, 255, 0.04);
        color: rgba(255, 255, 255, 0.50);
        border: none; // 去掉边框
        // border-color: #XXXXXX // 默认边框的颜色
        text-align: left;
        border-radius: 4px;
    }

    // 选中时边框颜色
    // /deep/ .el-input__inner:focus{
    //     border-color: #XXXXXX;
    // }

    // 鼠标悬浮时 input框颜色
    /deep/ .el-input__inner:hover{
        background-color: rgba(255, 255, 255, 0.12);
    }

    // input框 右侧的箭头
    /deep/ .el-select .el-input .el-select__caret {
        color: rgba(255, 255, 255, 0.50);
    }

    // option选项 上面的箭头
    /deep/ .el-popper[x-placement^="bottom"] .popper__arrow::after {
        border-bottom-color: rgba(43, 45, 55, 0.80);
        z-index: 9999;
    }
    /deep/ .popper__arrow {
        border: none;
    }
    // option选项 最外层
    /deep/ .el-select-dropdown {
        border: none !important;
        background: rgba(43, 45, 55, 0.80) !important;
        z-index: 9999;
    }
    // option选项 文字样式
    /deep/ .el-select-dropdown__item {
        color: rgba(255, 255, 255, 0.50) !important;
        z-index: 9999;
    }
    /deep/ .el-select-dropdown__item.selected span{
        color: rgba(255, 255, 255, 0.80) !important;
        z-index: 9999;
    }
    // 移入option选项 样式调整
    /deep/ .el-select-dropdown__item.hover{
        background-color: rgba(255, 255, 255, 0.06);
        color: rgba(255, 255, 255, 0.80) !important;
        z-index: 9999;
    }

	// 下拉框垂直滚动条宽度
    /deep/ .el-scrollbar__bar.is-vertical {
         width: 10px;
         top: 2px;
     }
    // 下拉框最大高度
     /deep/ .el-select-dropdown__wrap {
         max-height: 200px;
     }
}

如果出现了滚动条，option选项框在上方时，发现箭头颜色并未修改

此时需要在option选项 上面的箭头下方添加如下代码

// option选项 下面的箭头
 /deep/ .el-popper[x-placement^="top"] .popper__arrow::after {
     border-top-color: rgba(43, 45, 55, 0.80);
     z-index: 9999;
 }

再次刷新页面可以看到问题已经解决

注意！！！

/deep/在vue3.0会报错，如果报错，可采用::v-deep，二者效果基本一致，需要修改的样式差不多就这些

这个demo是单写了一个vue项目，而且页面中只有el-select组件，但在实际应用中，还需要根据具体的项目进行具体分析，但是修改方式大同小异~~