element-plus的el-select的樣式修改

一、在template中引入el-select

<div class="section2-searchBar">
    <el-select popper-class="popOption" v-model="value" filterable placeholder="Select" style="width: 240px">
        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</div>

二、單獨修改el-select的寬高

在.vue檔案中，經常將ElementPlus的樣式修改放在一個單獨的標籤中，有助於樣式的組織與維護。使用不帶scoped的標籤來處理全域性樣式，確保對ElementPlus的修改在全域性有效。

但是由於el-select的寬度和高度有可能在不同的場景中不一致，所以在.vue檔案的scoped屬性的style中修改寬高

&-searchBar {
    @include wihe(100%, 38px);

    .el-select {
        width: 100% !important;
    }
}

三、修改el-select的樣式

在.vue檔案沒有scoped屬性的style標籤中進行樣式修改

<style>
/**
    將ElementPlus的樣式修改放在一個單獨的標籤中，有助於樣式的組織與維護。
    使用不帶scoped的<style>標籤來處理全域性樣式，確保對ElementPlus的修改在全域性有效
*/
// 修改el-select的輸入框的背景色
.el-select__wrapper {
    background-color: #112231;
}

// 給el-select的下拉框定義一個class名稱叫做popOption
// 修改el-select下拉框的背景色
.popOption {
    background-color: #112231 !important;
}

// 修改el-select下拉框的字型顏色
.el-select-dropdown__item {
    color: #fff !important;
}

// 修改el-select下拉框滑鼠hover和選中時的字型顏色
.el-select-dropdown__item.is-hovering {
    background-color: rgb(0, 55, 100) !important;
    color: #29c0ff !important;
}

// 修改el-select的輸入框的placeholder的字型顏色
.el-select__placeholder.is-transparent {
    color: #858584 !important;
}

// 修改el-select的輸入框中顯示已經選擇的option name的字型顏色
.el-select__placeholder {
    color: #29c0ff !important;
}

.el-select {
    // 修改el-select的輸入框的border 
    --el-border-color-hover: rgba(10, 192, 246, 1);
--el-border-color: rgba(10, 192, 246, 1);
    // el-select的input輸入框的右邊的下箭頭的顏色
    --el-select-input-color: rgba(10, 192, 246, 1) !important;
    // el-select的input輸入框的左邊的游標的顏色
    --el-select-multiple-input-color: rgba(10, 192, 246, 1) !important;
}
</style>

四、最終效果