element ui修改select选择框背景色和边框色
一、修改选择框的背景色和边框色

style部分
.custom-select /deep/ .el-input__inner {color: #fff!important;border: 1px solid #326AFF;background: #04308D !important;
}
html部分
<el-select class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select>
要添加class="custom-select",
我的字体设置不成功,修改样式
.custom-select /deep/ .el-input__inner::placeholder {
color: #fff;
}

二、修改下拉选项的样式
添加:popper-append-to-body="false"
<el-select :popper-append-to-body="false" class="custom-select" v-model="dhvalue" placeholder="请选择" style="width:90%" size="mini"><el-option value="1">12</el-option><el-option value="1">123</el-option><el-option value="1">124</el-option><el-option value="1">125</el-option></el-select>
/* // 设置下拉框的背景颜色及边框属性; */
.custom-select /deep/.el-select-dropdown {/* // 若不将下拉框的背景颜色设置为:transparent,那么做不出来半透明的效果;// 因为其最终的显示为:下拉框有一个背景颜色且下拉框的字体有一个背景颜色,重叠后的效果展示; */border: 1px solid #326AFF;
background: #04308D !important;
}/* // 设置下拉框的字体属性及背景颜色; */
.custom-select .el-select-dropdown__item {font-size: 7px;color: #fff;font-weight: 200;background-color: #04308D ;
}/* // 设置下拉框列表的 padding 值为:0;(即:样式调整) */
.custom-select /deep/.el-select-dropdown__list {/* padding-top: 10px; */padding: 0;
}/* // 设置输入框与下拉框的距离为:0; (即:样式调整) */
.custom-select /deep/.el-popper[x-placement^="bottom"] {margin-top: 5px;
}/* // 将下拉框上的小箭头取消;(看着像一个箭头,其实是两个重叠在一起的箭头) */
.custom-select /deep/.el-popper .popper__arrow,
.custom-select /deep/.el-popper .popper__arrow::after {display: none;
}/* // 设置鼠标悬停在下拉框列表的悬停色; */
.custom-select /deep/.el-select-dropdown__item:hover {color: rgb(213, 215, 230);background-color:#326AFF;
}
相关文章:
element ui修改select选择框背景色和边框色
一、修改选择框的背景色和边框色 style部分 .custom-select /deep/ .el-input__inner {color: #fff!important;border: 1px solid #326AFF;background: #04308D !important; } html部分 <el-select class"custom-select" v-model"dhvalue" placeholde…...
软件测试人员提问常用的ChatGPT通用提示词模板
如何设计有效的软件测试用例? 如何运用自动化测试工具进行软件测试? 如何进行软件的功能测试、性能测试和安全测试? 如何评估软件测试的质量和覆盖范围? 软件测试有哪些常见的缺陷和错误,如何识别和解决࿱…...
【开源】基于JAVA的服装店库存管理系统
项目编号: S 052 ,文末获取源码。 \color{red}{项目编号:S052,文末获取源码。} 项目编号:S052,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 角色管理模块2.3 服…...
Jenkins代码检测和本地静态检查
1:Jenkins简介 Jenkins是一个用Java编写的开源的持续集成工具;Jenkins自动化部署可以解决集成、测试、部署等重复性的工作,工具集成的效率明显高于人工操作;并且持续集成可以更早的获取代码变更的信息,从而更早的进入测…...
从0开始学习JavaScript--JavaScript 字符串与文本内容使用
JavaScript中的字符串和文本内容处理是前端开发中的核心技能之一。本文将深入研究字符串的创建、操作,以及文本内容的获取、修改等操作,并通过丰富的示例代码,帮助读者更全面地了解和应用这些概念。 JavaScript 字符串基础 字符串是JavaScr…...
Linux--网络概念
1.什么是网络 1.1 如何看待计算机 我们知道,对于计算机来说,计算机是遵循冯诺依曼体系结构的(即把数据从外设移动到内存,再从内存到CPU进行计算,然后返回内存,重新读写到外设中)。这是一台计算机…...
C# 中的 Math 数学函数
C# 中的 Math 类提供了许多数学函数,用于执行各种常见的数学运算。以下是 Math 类中的一些常用方法: Math 数学函数 Abs: 返回指定数字的绝对值Acos: 返回指定数字的反余弦值(弧度)Asin: 返回指定数字的反正弦值(弧度&…...
mybatis之主键返回
1.在mybatis的xml中加入 <insert id"insertUser" keyProperty"id" useGeneratedKeys"true" parameterType"com.UserAndOrder"> insert into Tuser(userName,passWord) values (#{userName},#{passWord} ) </insert&…...
ChatGpt3.5已经应用了一段时间,分享一些自己的使用心得.
首先ChatGpt3.5的文本生成功能十分强大,但是chatgpt有一些使用规范大家需要注意,既然chat是一种工具,我们就需要学会它的使用说明,学会chatgpt的引用语句,会极大的方便我们的使用。我们需要做以下的准备。 明确任务和目…...
有趣的按钮分享
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 广告打完,我们进入正题,先看效果: 废话不多,上源码: <button class&quo…...
论文阅读:YOLOV: Making Still Image Object Detectors Great at Video Object Detection
发表时间:2023年3月5日 论文地址:https://arxiv.org/abs/2208.09686 项目地址:https://github.com/YuHengsss/YOLOV 视频物体检测(VID)具有挑战性,因为物体外观的高度变化以及一些帧的不同恶化。有利的信息…...
如何将图片转为excel或word?(客户端)
演示软件:金鸣表格文字识别大师3.6.1(新版本界面可能会略有不同) 第一部分 将图片转为excel或文表混合的word 一般的软件要将图片转为可编辑的excel,都需要待识别的图片要有明显清晰的表格线,但我们程序现已克服了这…...
Linux网络——HTTP
一.应用层 我们程序员写的一个个解决我们实际问题, 满足我们日常需求的网络程序, 都是在应用层. 我们上一次写的网络版本计算器就是一个应用层的网络程序。 我们约定了数据的读取,一端发送时构造的数据, 在另一端能够正确的进行解析, 就是ok的. 这种约定, 就是应…...
ElasticSearch综合练习题,ES为8版本,使用Kibana运行语句
文章目录 前言一、ES查询集群情况二、ES索引习题查询所有索引查询单个索引 三、ES增删改查数据单条处理批量处理 四、雇员查询练习题五、学生查询练习题六、商品信息联系题其他:一问一答参考文档 前言 ES8版本没有type概念,所以语法可能会与其他版本有差…...
Java方法中不使用的对象应该手动赋值为NULL吗?
在java方法中,不使用的对象是否应该手动赋值为null?我们先来通过一个示例看一下。 垃圾回收示例一 public class GuoGuoTest {public static void main(String[] args) {byte[] placeholder new byte[64 * 1024 * 1024];System.gc();} } 上面代码向内…...
Mysql主从搭建
Mysql主从搭建 1.Mysql下载1.1 查看操作系统2.2 下载mysql安装包 2.Mysql安装2.1 解压2.2 目录重命名2.3 创建data,存储文件2.4 创建用户组2.5 授权用户2.6 配置环境变量2.7 编辑my.cnf2.8 创建相关目录和文件2.9 初始化数据库2.10 复制mysql.server到/etc/init.d/下…...
WPF程序给按钮增加不同状态的图片
首先我们在资源里添加几个图片,Up,Over和Down状态。 然后我们创建一个Style。默认我们的背景设置成Up 然后在Triggers里添加代码,当Property:IsMouseOver为True的时候更换成Over;当Property:IsPressed为Tr…...
Java编程陷阱(三)
陷阱11:不要使用StringBuffer类来拼接字符串 StringBuffer是Java中的一个类,它可以表示一个可变的字符串,也就是可以对字符串进行修改和追加的操作,比如使用append或insert方法来拼接字符串。有时候,我们需要使用StringBuffer类来拼接字符串,比如在循环中动态地构建一个字…...
数据仓库相关
在阿里巴巴的数据体系中,我们建议将数据仓库分为三层,自下而上为:数据引入层(ODS,Operation Data Store)、数据公共层(CDM,Common Data Model)和数据应用层(…...
SpringBoot学习笔记-创建个人中心页面(下)
笔记内容转载自 AcWing 的 SpringBoot 框架课讲义,课程链接:AcWing SpringBoot 框架课。 CONTENTS 1. 实现个人中心页面2. POJO时区修改3. 集成代码编辑器 本节实现个人中心的前端页面,用户能够查看自己的 Bot 信息,并能创建、修改…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明
AI 领域的快速发展正在催生一个新时代,智能代理(agents)不再是孤立的个体,而是能够像一个数字团队一样协作。然而,当前 AI 生态系统的碎片化阻碍了这一愿景的实现,导致了“AI 巴别塔问题”——不同代理之间…...
智能仓储的未来:自动化、AI与数据分析如何重塑物流中心
当仓库学会“思考”,物流的终极形态正在诞生 想象这样的场景: 凌晨3点,某物流中心灯火通明却空无一人。AGV机器人集群根据实时订单动态规划路径;AI视觉系统在0.1秒内扫描包裹信息;数字孪生平台正模拟次日峰值流量压力…...
MySQL用户和授权
开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务: test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
【JVM】Java虚拟机(二)——垃圾回收
目录 一、如何判断对象可以回收 (一)引用计数法 (二)可达性分析算法 二、垃圾回收算法 (一)标记清除 (二)标记整理 (三)复制 (四ÿ…...
【 java 虚拟机知识 第一篇 】
目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
Vue ③-生命周期 || 脚手架
生命周期 思考:什么时候可以发送初始化渲染请求?(越早越好) 什么时候可以开始操作dom?(至少dom得渲染出来) Vue生命周期: 一个Vue实例从 创建 到 销毁 的整个过程。 生命周期四个…...
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
第三周 Day 3 🎯 今日目标 理解类(class)和对象(object)的关系学会定义类的属性、方法和构造函数(init)掌握对象的创建与使用初识封装、继承和多态的基本概念(预告) &a…...
