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.mzph.cn/bicheng/62701.shtml

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

相关文章

python数据分析之爬虫基础:爬虫介绍以及urllib详解

前言 在数据分析中&#xff0c;爬虫有着很大作用&#xff0c;可以自动爬取网页中提取的大量的数据&#xff0c;比如从电商网站手机商品信息&#xff0c;为市场分析提供数据基础。也可以补充数据集、检测动态变化等一系列作用。可以说在数据分析中有着相当大的作用&#xff01;…

M|两小无猜

title: 两小无猜 Jeux d’enfants time: 2024-12-01 周日 rating: 7 豆瓣: 7.9 上映时间: “2003” 类型: M爱情 导演: 杨塞谬尔 Yann Samuell 主演: 吉约姆卡内 Guillaume Canet玛丽昂歌迪亚 Marion Cotillard 国家/地区: 法国比利时 片长/分钟: 93分钟 M&#xff…

你的网站真的安全吗?如何防止网站被攻击?

你的网站被黑客攻击过&#xff0c;很可能不止一次&#xff01; 这可不是危言耸听。微软最近发布了《2024 年微软数字防御报告》&#xff0c;报告中写到&#xff1a;“Windows 用户每天面临超过 6 亿次网络犯罪和国家级别的攻击&#xff0c;涵盖了从勒索软件到网络钓鱼再到身份…

深度学习中的前向传播与损失函数

目录 ​编辑 前向传播&#xff1a;神经网络的推理过程 什么是前向传播&#xff1f; 前向传播的步骤 数学表达 代码示例&#xff1a;前向传播 损失函数&#xff1a;衡量预测与真实值的差异 损失函数的定义 损失函数的作用 常见的损失函数 代码示例&#xff1a;损失函…

【Math】奇异值分解(SVD)详解及 Python 实现

1. 什么是奇异值分解&#xff08;SVD&#xff09; 奇异值分解&#xff08;Singular Value Decomposition&#xff0c;简称 SVD&#xff09;是矩阵分解的一种方法&#xff0c;它将任意矩阵 A A A 分解为三个矩阵的乘积&#xff1a; A U Σ V T A U \Sigma V^T AUΣVT 其中&…

桶排序(代码+注释)

#include <stdio.h> #include <stdlib.h>// 定义桶的结构 typedef struct Bucket {int* data; // 动态数组int count; // 当前存储的元素个数int capacity; // 桶的容量 } Bucket;// 初始化桶 void InitBucket(Bucket* bucket) {bucket->capacity 10; // 初…

【Linux】进程控制,手搓简洁版shell

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 1、进程创建2、进程终止3、进程等待4、进程程序替换5、手写简洁版shell 1、进程创建 fork函数&#xff1a;从已经存在的进程中创…

雪花算法生成ID

下面将简单介绍雪花算法的简单应用和在web应用中的使用。 雪花算法的组成&#xff1a;雪花算法是由64位组成&#xff1a;符号位(1)、时间戳(41)、机器码(5[数据中心]5[机器ID])、计数器(12) 对于雪花算法的源码可以在这里看&#xff1a;bwmarrin/snowflake: A simple to use …

EasyDarwin搭建直播推流服务

学习链接 easydarwin官网 - 这里看介绍 easydarwin软件下载地址 - 百度网盘 easydarwin视频 B站 文章目录 学习链接使用下载EasyDarwin压缩包&#xff0c;并解压到目录启动EasyDarwin点播直播easyplayer.jsapidocffmpeg推流rtsp & ffplay拉流 使用 下载EasyDarwin压缩包…

云备份实战项目

文章目录 前言一、整体项目简介二、服务端环境及功能简介三、 客户端环境及功能简介四、服务端文件管理类的实现1. 获取文件大小&#xff0c;最后一次修改时间&#xff0c;最后一次访问时间&#xff0c;文件名称&#xff0c;以及文件内容的读写等功能2. 判断文件是否存在&#…

关于ConstarintLayout有关的点

目录 一、概述 二、过程。 1、介绍 主要特点 关键概念 使用示例 总结 2、我遇到的问题 问题&#xff1a; 可能的原因&#xff1a; 结论 一、概述 在学习过程中&#xff0c;发现对ConstarintLayout理解不够到位&#xff0c;下面是发现并解决问题过程。 二、过程。 1…

《数字图像处理基础》学习07-图像几何变换之最近邻插值法放大图像

目录 一&#xff0c;概念 二&#xff0c;题目及matlab实现 1&#xff0c;解题思路 2&#xff0c;matlab实现 1&#xff09;matlab思路 2&#xff09;完整代码 三&#xff0c;放大图像及matlab实现 一&#xff0c;概念 通过上一篇&#xff0c;我已经学习了使用最邻近插…

计网-子网划分

基于本视频观看做的笔记&#xff0c;帮助自己理解 子网掩码&#xff1a;用于识别IP地址中的网络号和主机号的位数 表示方法 第一种.32位二进制数字&#xff0c;在子网掩码中&#xff0c;网络号用”1“表示&#xff0c;主机号用”0“表示 e.g.:IP地址1.1.1.1的子网掩码是255…

【Solidity】入门指南:智能合约开发基础

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Solidity入门指南&#xff1a;智能合约开发基础引言1. 开发环境搭建1.1 Remix I…

如何高效地架构一个Java项目

引言 Java是企业级应用开发的主流语言之一&#xff0c;而我们作为使用Java语言的程序员&#xff0c;职称有初级、中级、高级、资深、经理、架构&#xff0c;但我们往往只是慢慢通过经验的积累迭代了自己的等级&#xff0c;如果没有保持学习的习惯&#xff0c;大多数程序员会停留…

HTTP 探秘之旅:从入门到未来

文章目录 导言&#xff1a;目录&#xff1a;第一篇&#xff1a;HTTP&#xff0c;互联网的“快递员”第二篇&#xff1a;从点开网页到看到内容&#xff0c;HTTP 究竟做了什么&#xff1f;第三篇&#xff1a;HTTP 的烦恼与进化史第四篇&#xff1a;HTTP 的铠甲——HTTPS 的故事第…

前端处理sql参数替换问题,即使有重复参数,也可以按顺序替换

我们可以创建一个通用的模板函数,能够处理任意SQL语句中的占位符替换。这个函数将接受两个参数: sqlTemplate:包含占位符的SQL模板字符串。params:一个对象数组,每个对象包含name和value,用于替换SQL模板中的占位符。通用模板函数 function replaceSqlPlaceholders(sqlT…

Fabric.js 中文文档

Fabric.js 中文文档 基于canvas画布的实用类Fabric.js的使用 4、Fabric.js 常用的方法&事件 Fabric.js 画布 defaultCursor 属性(1) 官网文档地址&#xff1a;http://fabricjs.com/docs/github 地址&#xff1a;https://github.com/fabricjs/fabric.js Demo地址&#x…

c++:thread(线程)

1.基本使用 1.1创建线程 join()函数用于&#xff1a;主程序等待子线程执行完毕之后再继续 #include <iostream> #include <thread>void printHello() {std::cout << "hello world" << std::endl; }int main() {// 1.创建线程std::thread …

第六届金盾信安杯-SSRF

操作内容&#xff1a; 进入环境 可以查询网站信息 查询环境url https://114.55.67.167:52263/flag.php 返回 flag 就在这 https://114.55.67.167:52263/flag.php 把这个转换成短连接&#xff0c;然后再提交 得出 flag