自定义element-ui的select选择框样式

项目中实现的效果如图:

 

 HTML部分:

<el-button style="margin-left:30px">手动</el-button>
<el-button style="margin-left:30px">自动</el-button>

CSS部分:

.el-select-dropdown {
    background-color: #93240f;
    border: 0;
    li {
        background-color: #93240f !important;
        color: #fff;
        &:hover {
            background-color: #93240f;
            color: #fff;
        }
    }
  li.selected{
    color: #fff;
  }
}
.el-select {
    width: 160px;
    height: 60px;
    margin-left: 60px;
    .el-input--suffix {
        height: 100%;
        > input {
            height: 100%;
            background: #93240f;
        }
        .el-select__caret {
            font-size: 35px;
        }
        .el-input__inner {
            font-size: 26px;
            color: #ffffff;
            border: 0;
        }
        .el-input__suffix {
            height: 40px;
            top: 10px;
            font-size: 26px;
            .el-icon-arrow-up:before {
                content: '';
                color: #fd774e;
            }
        }
    }
}

这个样式是在全局定义的,如果是局部使用,需要在select中添加

:popper-append-to-body="false"

popper-class="test"

 

因为下拉框标签与script标签是同级的

参考 https://blog.csdn.net/c_qianxia5040/article/details/116061810