el-select 修改样式

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

调整后样式为:

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

分为两部分。

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

第二部分:是修改弹出的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.rhkb.cn/news/483194.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

柔性数组详解+代码展示

系列文章目录 &#x1f388; &#x1f388; 我的CSDN主页:OTWOL的主页&#xff0c;欢迎&#xff01;&#xff01;&#xff01;&#x1f44b;&#x1f3fc;&#x1f44b;&#x1f3fc; &#x1f389;&#x1f389;我的C语言初阶合集&#xff1a;C语言初阶合集&#xff0c;希望能…

【测试工具JMeter篇】JMeter性能测试入门级教程(七):JMeter断言

一、前言 在 JMeter 中&#xff0c;断言元件&#xff08;Assertion&#xff09;用于验证测试结果是否符合预期。断言元件可以检查服务器的响应数据&#xff0c;以确保它们符合期望的模式或值&#xff0c;从而验证性能测试脚本的正确性。断言元件通常在每个请求的响应中添加&am…

【Linux课程学习】:站在文件系统之上理解:软硬链接,软硬链接的区别

&#x1f381;个人主页&#xff1a;我们的五年 &#x1f50d;系列专栏&#xff1a;Linux课程学习 &#x1f337;追光的人&#xff0c;终会万丈光芒 &#x1f389;欢迎大家点赞&#x1f44d;评论&#x1f4dd;收藏⭐文章 Linux学习笔记&#xff1a; https://blog.csdn.net/d…

【森林生态系统揭秘】用R语言解锁森林结构、功能与稳定性分析!生物多样性与群落组成分析、路径分析、群落稳定性分析等

目录 专题一 理论讲解 专题二 数据获取与处理 专题三 生物多样性与群落组成分析 专题四 机器学习在群落分析中的应用 专题五 路径分析和结构方程模型&#xff08;SEM&#xff09; 专题六 群落稳定性分析 专题七 案例分析与写作指南 在生态学研究中&#xff0c;森林生态系…

无分类编址的IPv4地址

/20含义&#xff1a;前20比特位为网络号&#xff0c;后面32-2012为主机号 路由聚合&#xff1a;找共同前缀 所有可分配地址的主机都能接收广播地址&#xff0c;

初始化列表与Static成员

一、再谈构造函数 1.1构造函数体赋值 在创建对象时&#xff0c;编译器会调用构造函数&#xff0c;给对象中各个成员变量一个合适的初始值 class Date { private:int _year;int _month;int _day; public:Date(int year, int month, int day){_year year;_month month;_day …

THENA大涨将对整个DeFi市场产生怎样的影响?

引言 近期&#xff0c;区块链行业的一个热门项目——THENA&#xff08;THE&#xff09;代币&#xff0c;在短时间内吸引了大量投资者的目光。THE代币的价格在短短几个月内经历了显著的上涨&#xff0c;引发了市场对其背后机制的浓厚兴趣。而在THENA生态系统的成功背后&#xf…

从被动响应到主动帮助,ProActive Agent开启人机交互新篇章

在人工智能领域&#xff0c;我们正见证着一场革命性的变革。传统的AI助手&#xff0c;如ChatGPT&#xff0c;需要明确的指令才能执行任务。但现在&#xff0c;清华大学联合面壁智能等团队提出了一种全新的主动式Agent交互范式——ProActive Agent&#xff0c;它能够主动观察环境…

SpringBoot(一)

Springboot(一) 什么是SpringBoot SpringBoot是Spring项目中的一个子工程&#xff0c;与Spring-famework同属于Spring的产品 用一些固定的方式来构建生产级别的Spring应用。SpringBoot推崇约定大于配置的方式以便于能够尽可能快速的启动并运行程序 我们把Spring Boot称为搭建程…

PDF与PDF/A的区别及如何使用Python实现它们之间的相互转换

目录 概述 PDF/A 是什么&#xff1f;与 PDF 有何不同&#xff1f; 用于实现 PDF 与 PDF/A 相互转换的 Python 库 Python 实现 PDF 转 PDF/A 将 PDF 转换为 PDF/A-1a 将 PDF 转换为 PDF/A-1b 将 PDF 转换为 PDF/A-2a 将 PDF 转换为 PDF/A-2b 将 PDF 转换为 PDF/A-3a 将…

【设计模式系列】备忘录模式(十九)

目录 一、什么是备忘录模式 二、备忘录模式的角色 三、备忘录模式的典型应用场景 四、备忘录模式在Calendar中的应用 一、什么是备忘录模式 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许在不暴露对象内部状态的情况下保存和恢…

window 下用Ollama 开发一个简单文档问答系统

文档问答系统 本系统利用先进的语言模型和检索技术&#xff0c;为用户提供基于上传文件内容的问答服务。支持多种文件格式&#xff0c;包括 Word、PDF、CSV、SQL 和 TXT 文件。 功能介绍 文件上传 用户可以同时上传多个文件。支持的文件类型包括&#xff1a;.doc, .docx, .…

全国296个地级市平均房价数据(2000-2022年)

全国296个地级市平均房价数据(2000-2022年)&#xff0c;包括面板数据和截面数据 点击下载 1、数据来源&#xff1a;安居客、房天下、房价行情网等住房交易网页整理 2、时间跨度&#xff1a;2000-2022年 3、区域范围&#xff1a;全国296个地级市 4、缺失说明&#xff1a;西…

贴片式内存卡 ​SD NAND​

SD NAND FLASH 贴片式SD卡 贴片式t卡 存储芯片 1. 什么是贴片式内存卡 贴片式内存卡是指一种将内存芯片直接贴装在电路板上的内存卡类型。与传统的插针式内存卡&#xff08;如SD卡、MicroSD卡&#xff09;不同&#xff0c;贴片式内存卡通常不具有外部引脚或接口&#xff0c;而…

C—操作符易错点

strlen与sizeof strlen求的是大小&#xff0c;包含“\0” strlen求的是&#xff0c;长度不包括“\0” 注意&#xff1a;空格也算一个字符 操作符“/”(除法&#xff09; 对于除法操作符来说&#xff0c;两边都是整数&#xff0c;那么就是整数除法 如果想计算出小数&#x…

基于PyTorch框架的线性回归实现指南

目录 ​编辑 1. 线性回归基础 2. PyTorch环境搭建 3. 数据准备 4. 定义线性回归模型 5. 损失函数和优化器 6. 训练模型 7. 评估模型 8. 结论 线性回归是统计学和机器学习中最基本的预测模型之一&#xff0c;它试图找到输入特征和输出结果之间的线性关系。在深度学习框…

R语言机器学习论文(六):总结

文章目录 介绍参考文献介绍 本文采用R语言对来自进行数据描述、数据预处理、特征筛选和模型构建。 最后我们获得了一个能有效区分乳腺组织的随机森林预测模型,它的性能非常好,这意味着它可能拥有非常好的临床价值。 在本文中,我们利用R语言对来自美国加州大学欧文分校的B…

基于Java Springboot校园导航微信小程序

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse微信开发…

面试题-RocketMQ的基本架构、支持的消息模式、如何保证消息的可靠传输

相关问题 1、RocketMQ的基本架构是怎样的&#xff1f;请简述各组件的作用。 2、RocketMQ支持哪几种消息模式&#xff08;如点对点、发布/订阅&#xff09;&#xff1f;请简要说明它们的区别。 3、如何使用Java客户端实现一个简单的消息生产者和消费者&#xff1f; 4、RocketMQ…

WPF+LibVLC开发播放器-LibVLC在C#中的使用

使用WPFLibVLC快速 开发一个播放器 安装包Nuget 安装下面两个包,必须安装两个 一个是相关框架对应的包&#xff0c;Winform就安装LibVLCSharp.Winform;WPF就安装LibVLCSharp.WPF&#xff0c;以此类推&#xff0c;他们都默认依赖LibVLCSharp&#xff0c;不需要例外安装 一个是…