基于CSDN的三步走，到哪步能用了就停手：
第一步：在`el-select`添加属性`mySelectStyle`（名称可自定义）。详细连接如下：
Vue3：修改下拉框el-select的样式-CSDN博客
懒得跳转过去的朋友直接看
代码摘要：
<el-select v-model="value" placeholder="请选择" popper-class="mySelectStyle"> //popper-class='内容可自定义' <el-option /> </el-select>
第二步：在`style`中使用`::deep`或`/deep/`，结果发现不生效。详细连接如下：
Vue中的Element-plus的Select选择器下拉框样式如果自定义修改（popper-append-to-body(已废弃)的平替popper-class属性的解决方法）-CSDN博客
【注意：此代码为我这不生效的代码】
代码摘要
<style lang="less"> //下拉框标题文本label ::v-deep .el-form-item__label{ color: #fff; font-weight: 100; } //选择框 ::v-deep .el-input__wrapper{ background-color: rgba(26, 84, 128,0.5); width:130px; } //下拉框文字 /deep/ .el-input__inner{ color:#e1dcdc; } //下拉框背景色 .el-popper.is-light.mySelectStyle { background-color: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } //下拉框的链接小方块 .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before { background: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before { background: #254277 !important; border: 1px solid #254277 !important; } //鼠标移动上去的选中色 .mySelectStyle { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: #2A77C6 !important; } //下拉框的文本颜色 .el-select-dropdown__item { color: #B3BCCE !important; } //选中之后的颜色 .el-select-dropdown__item.selected { background: #2A77C6 !important; } } </style>
效果如图
第三步：通过不同的style，解决了不生效的情况，但是不确定是否会与其他样式冲突。
详细链接如下：
Vue3中样式渗透:deep()为什么无效_vue3 deep-CSDN博客
将deep单独写在一个style内并加上scoped，成功的生效了
代码摘要：
<style lang="less" scoped> :deep(.el-input__wrapper) { background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%); box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset; } :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) { box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important; } :deep(.el-select .el-input.is-focus .el-input__wrapper) { box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important; } :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) { background: #0b3571; } :deep(.el-select .el-input__wrapper) { background: #0b3571; } </style> <style lang="less"> //下拉框的背景色 .el-select-dropdown__item { background: #254277 !important; } //下拉框的链接小方块 .el-select-dropdown__item.is-active { background: #2A77C6 !important; } //鼠标移动上去的选中色 .el-select-dropdown__item.hover, //下拉框背景色 .el-popper.is-light.mySelectStyle { background-color: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } //下拉框的链接小方块 .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before { background: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before { background: #254277 !important; border: 1px solid #254277 !important; } //鼠标移动上去的选中色 .mySelectStyle { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: #2A77C6 !important; } //下拉框的文本颜色 .el-select-dropdown__item { color: #B3BCCE !important; } //选中之后的颜色 .el-select-dropdown__item.selected { background: #2A77C6 !important; } } </style>
效果如图
完整代码，可直接复制为组件使用（需全局安装element-plus）：
<template> <el-form-item label="统计频度"> <el-select v-model="value" value-key="id" placeholder="请选择" popper-class="mySelectStyle" clearable filterable> <el-option v-for="item in option" :key="item.id" :label="item.label" :value="item.value" :disabled="item.disabled" /> </el-select> </el-form-item> </template> <script lang="ts"> import { ref, reactive, defineComponent } from 'vue' export default defineComponent({ name: 'MySelect', props: { value: { type: String, default: '' }, option: { type: Array, default: () => [] } }, setup(props) { const value = ref(props.value) const option = reactive(props.option) return { value, option } } }) </script> <style lang="less" scoped> :deep(.el-input__wrapper) { background: linear-gradient(90deg, #0b3571, rgba(11, 53, 113, 0) 100%); box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset; } :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) { box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important; } :deep(.el-select .el-input.is-focus .el-input__wrapper) { box-shadow: 0 0 0 0 var(--el-select-input-focus-border-color) inset !important; } :deep(.el-select:hover:not(.el-select--disabled) .el-input__wrapper) { background: #0b3571; } :deep(.el-select .el-input__wrapper) { background: #0b3571; } </style> <style lang="less"> //下拉框的背景色 .el-select-dropdown__item { background: #254277 !important; } //下拉框的链接小方块 .el-select-dropdown__item.is-active { background: #2A77C6 !important; } //鼠标移动上去的选中色 .el-select-dropdown__item.hover, //下拉框背景色 .el-popper.is-light.mySelectStyle { background-color: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } //下拉框的链接小方块 .mySelectStyle.el-popper[data-popper-placement^=bottom] .el-popper__arrow::before { background: rgba(0, 136, 255, 0.1) !important; border: 1px solid #254277 !important; } .mySelectStyle.el-popper[data-popper-placement^=top] .el-popper__arrow::before { background: #254277 !important; border: 1px solid #254277 !important; } //鼠标移动上去的选中色 .mySelectStyle { .el-select-dropdown__item.hover, .el-select-dropdown__item:hover { background: #2A77C6 !important; } //下拉框的文本颜色 .el-select-dropdown__item { color: #B3BCCE !important; } //选中之后的颜色 .el-select-dropdown__item.selected { background: #2A77C6 !important; } } </style>
