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>

四、最终效果