Vue3 +Element-Plus el-select下拉菜单样式(局部生效)

下拉框代码

1. <el-select
2.             class="buttons-switch-group select-hub"
3.             :teleported="false"
4.             style="width: 120px"
5.             v-model="queryParam.type"
6.             placeholder="请选择"
7.             size="mini"
8.             @change="loadData"
9.           >
10.             <el-option label="客运站" value="客运站"></el-option>
11.             <el-option label="高铁站" value="高铁站"></el-option>
12.             <el-option label="码头" value="码头"></el-option>
13.             <el-option label="火车站" value="火车站"></el-option>
14.             <el-option label="机场" value="机场"></el-option>
15.           </el-select>

复制代码

样式穿透

1. .buttons-switch-group {
2.   --el-fill-color-blank: rgba(8, 20, 65, 0.3);
3.   --el-border: 1px solid #073f97;
4.   --el-text-color-regular: #dedfe4;
5. }
6. .select-hub:deep(.el-select__wrapper) {
7.   min-height: 0.875rem !important;
8.   min-width: 2rem !important;
9.   box-shadow: 0 0 0 1px #008cffff inset;
10.   border-image: linear-gradient(180deg, rgba(28, 173, 255, 1), rgba(0, 140, 255, 1)) 1 1;
11. }
12. .select-hub:deep(.el-popper.is-light .el-popper__arrow::before) {
13.   border: 1px solid #01194d !important;
14.   background: #01194d !important;
15. }
17. .select-hub:deep(.el-popper.is-light) {
18.   background: #01194d;
19.   //border: 1px solid #273f70;
20. }
21. .select-hub:deep(.el-select-dropdown__item) {
22.   text-align: left;
23.   background: #01194d;
24.   border: none;
25.   color: #fff;
26. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。