自定義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