修改el-select默认样式

在开发过程中,我们一般遇到特殊的UI效果图,不得不修改<el-select>默认样式了。

修改el-select框样式

html 复制代码
<template>
       <el-select
         v-model="yearValue"
         class="select_box"
         multiple
         placeholder="请选择年份支持多选"
         :teleported="false"
         >
            <el-option
              v-for="item in yearOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
        </el-select>
</template>
css 复制代码
.select_box {
    width: 170px;

    // 默认placeholder
    :deep(.el-input__inner::placeholder) {
        color: #ccc;
    }

    // 默认框状态样式更改
    :deep(.el-input__wrapper) {
        background-color: #1d333700 !important;
        box-shadow: 0 0 0 1px #3fa6f4 inset !important;
        --el-select-focus-border-color: #3fa6f4 !important;
        --el-select-hover-border-color: #3fa6f4 !important;
    }

    // 修改下拉框样式-点击框focus
    :deep(.is-focus .el-input__wrapper) {
        box-shadow: 0 0 0 1px #3fa6f4 inset !important;
        --el-select-focus-border-color: #3fa6f4 !important;
        --el-select-hover-border-color: #3fa6f4 !important;
    }

    :deep(.el-select__caret) {
        color: #3fa6f4 !important; // 清除按钮
    }

    :deep(.el-input__inner) {
        color: #3fa6f4 !important; // 选中字体色
    }

    :deep(.el-select-dropdown__empty) {
        background-color: #072258;
        color: #ddd !important;

    }

    :deep(.el-select-dropdown__wrap) {
        color: #fff;
        background-color: #072258;
        color: #ddd !important;
    }

    :deep(.el-select-dropdown__item) {
        color: #fff !important;
    }

    :deep(.el-select-dropdown__item.hover) {
        background-color: rgb(22, 81, 244) !important;
        color: #ddd !important;
    }

    :deep(.el-select-dropdown__item.selected) {
        background-color: rgb(22, 81, 244) !important;
        color: #ddd !important;
    }

    :deep(.el-select-tags-wrapper.has-prefix>span) {
        background-color: rgb(22, 81, 244) !important;
        color: #ddd !important;
    }
}

// 下拉框-展开样式
.el-select-dropdown__item.selected {
    // background-color: #83e818!important; // 选中
}

.el-select-dropdown__item.hover {
    background-color: #121f1b !important; // hover
}

:deep .el-dropdown-menu__item:not(.is-disabled) {
    // color: #182F23!important; // disabled
}

.el-select-dropdown__item {
    color: #3fa6f4 !important; // 下拉项颜色
}

:deep .el-popper {
    background-color: #121f1b !important; // 展开下拉背景
    border: 1px solid #3fa6f4 !important; // 展开下拉边框
}

:deep .el-popper .el-popper__arrow::before {
    border-top: 1px solid #3fa6f4 !important; // 箭头按钮边框
    background-color: #121f1b !important; // 箭头按钮背景色
}

这里需要注意一点,<el-select>修改下拉框的样式需要加上**:teleported="false"**详细看element plus官网文档

相关推荐
乆夨(jiuze)22 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
小彭努力中43 分钟前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
code_YuJun1 小时前
Promise 基础使用
前端·javascript·promise
Codebee1 小时前
OneCode自主UI设计体系:架构解析与核心实现
前端·javascript·前端框架
邢同学爱折腾1 小时前
当前端轮播图遇上Electron: 变身一款丝滑的 图片查看器
javascript·electron
xiguolangzi1 小时前
vue3+element-plus el-table列的显隐、列宽 持久化
前端·javascript·vue.js
大猩猩X2 小时前
vxe-upload vue 实现附件上传、手动批量上传附件的方式
vue.js·vxe-ui
come112342 小时前
Vue 响应式数据传递:ref、reactive 与 Provide/Inject 完全指南
前端·javascript·vue.js
UI设计和前端开发从业者3 小时前
从UI设计到数字孪生实战应用:构建智慧金融的智能风控平台
ui·金融