el-select 修改样式

ops/2024/12/29 2:41:28/

这样漂亮的页面,搭配的却是一个白色风格的下拉框 ,这也过于刺眼。。。

调整后样式为:

灯红酒绿总有人看着眼杂,但将风格统一终究是上上选择。下面来处理这个问题。

分为两部分。

第一部分:是修改触发框的样式

第二部分:是修改弹出的popover的样式

1、修改触发框的样式,将边框、背景颜色置为匹配的颜色

<style lang="scss" scoped>::v-deep {.el-input__inner {background-color: transparent;border: 1px solid white;color: white;line-height: 28px;height: 28px;font-size: 12px;padding: 0 0 0 10px;}
}
</style>

2、修改弹出的popover的样式。

给el-select添加popper-class

添加CSS样式修改对应的UI样式 


<style>
.popperView.el-select-dropdown {border: 3px solid #343434;
}.popperView .el-select-dropdown__list {background-color: #222;
}/* 自定义选中的选项背景色 */
.popperView .el-select-dropdown__item.selected {background-color: rgba(2, 134, 240, 0.2);color: white;
}/* 自定义鼠标悬停的选项背景色 */
.popperView .el-select-dropdown__item:hover {background-color: #ecf5ff;
}.popperView .el-select-dropdown__item {background-color: transparent;&:hover {background-color: rgba(2, 134, 240, 0.2);;color: white;}
}.el-popper[x-placement^=top] .popper__arrow::after {border-top-color: #343434;
}.el-popper[x-placement^=top] .popper__arrow {border-top-color: #343434;
}.el-popper[x-placement^=bottom] .popper__arrow::after {border-bottom-color: #343434;
}.el-popper[x-placement^=bottom] .popper__arrow {border-bottom-color: #343434;
}
</style>

 

 


http://www.ppmy.cn/ops/139590.html

相关文章

在超表面中琼斯矩阵的使用

琼斯矩阵&#xff08;Jones Matrix&#xff09; 是一种线性代数方法&#xff0c;用于描述光的偏振状态和偏振变化&#xff0c;是偏振光学中重要的数学工具。它在 超表面理论设计 中广泛应用&#xff0c;尤其是在设计和调控光与物质相互作用时&#xff0c;例如偏振控制、相位调制…

ENDC下UE无法注册5G的问题

这是一个ENDC场景&#xff0c;UE无法注册5G网络&#xff0c;也就是UE无法添加NR cell的问题。现在就是UE注册LTE后&#xff0c;网络侧没有配置NR 测量相关的object及event&#xff0c;后面也没有什么盲添加NR cell的过程。 如上图&#xff0c;UE注册LTE后就在LTE做一些业务。之…

贪心算法part01

文章参考来源代码随想录 贪心算法&#xff1a;局部最优到全局最优 455.分发饼干 这里的局部最优就是大饼干喂给胃口大的&#xff0c;充分利用饼干尺寸喂饱一个&#xff0c;全局最优就是喂饱尽可能多的小孩 可以尝试使用贪心策略&#xff0c;先将饼干数组和小孩数组排序 然…

Spring Boot+Netty

因工作中需要给第三方屏幕厂家下发广告&#xff0c;音频&#xff0c;图片等内容&#xff0c;对方提供TCP接口于是我使用Netty长链接进行数据传输 1.添加依赖 <!-- netty依赖--><dependency><groupId>io.netty</groupId><artifactId>netty-all&…

EasyAnimateV5 视频生成大模型原理详解与模型使用

在数字内容创作中&#xff0c;视频扮演的角色日益重要。然而&#xff0c;创作高质量视频通常耗时且昂贵。EasyAnimate 系列旨在利用人工智能技术简化这一过程。EasyAnimateV5 建立在其前代版本的基础之上&#xff0c;不仅在质量上有所提升&#xff0c;还在多模态数据处理和跨语…

【附源码】基于环信鸿蒙IM SDK实现一个聊天Demo

项目背景 本项目基于环信IM 鸿蒙SDK 打造的鸿蒙IM Demo&#xff0c;完全适配HarmonyOS NEXT系统&#xff0c;实现了发送消息&#xff0c;添加好友等基础功能。代码开源&#xff0c;功能简洁&#xff0c;如果您有类似开发需求可以参考。 源码地址&#xff1a;https://github.c…

Word2vec、词向量是什么? |Gensim中word2vec模型的参数定义

前言&#xff1a; 最近在忙毕设&#xff0c;要学习一些AI的技术。很多资料看来看去&#xff0c;感觉只是在大脑皮层表面略过了一下&#xff0c;遂还是决定采用老方法&#xff0c;写博客&#xff01;&#xff01;&#xff01;对了&#xff0c;我也只是一个萌新&#xff0c;博客的…

网络原理之 UDP 协议

目录 1. UDP 协议报文格式 2. UDP 的特点 (1) 无连接 (2) 不可靠 (3) 面向数据报 (4) 全双工 3. 基于 UDP 的应用层协议 前文是&#xff1a;UDP 的使用 首先了解一下基础知识&#xff1a; 1. UDP 协议报文格式 传输层最重要的协议有两个&#xff0c;一个是 TCP&#x…