修改el-select和el-input样式;修改element-plus的下拉框el-select样式

修改el-select样式
在这里插入图片描述
在这里插入图片描述

.select_box{
  // 默认placeholder
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 默认框状态样式更改
  :deep .el-input__wrapper {
    height: 42px;
    background-color: rgba(0,0,0,0)!important;
    box-shadow: 0 0 0 1px #204C42 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  // 修改下拉框样式-点击框focus
  :deep .is-focus .el-input__wrapper {
    box-shadow: 0 0 0 1px #5AC087 inset!important;
    --el-select-focus-border-color:#5AC087!important;
    --el-select-hover-border-color: #5AC087!important;
  }
  :deep .el-select__caret {
    color:#5AC087!important;  // 清除按钮
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 选中字体色
  }
}

// 下拉框-展开样式
.el-select-dropdown__item.selected {
  // background-color: #83e818!important; // 选中
}
.el-select-dropdown__item.hover {
  background-color: #498f6c!important; // hover
}
:deep .el-dropdown-menu__item:not(.is-disabled) {
  // color: #182F23!important; // disabled
}
.el-select-dropdown__item {
  color: #4FC78A !important; // 下拉项颜色
}
:deep .el-popper{
  background-color: #121f1b!important; // 展开下拉背景
  border: 1px solid #498f6c!important; // 展开下拉边框
}
:deep .el-popper .el-popper__arrow::before{
  border-top: 1px solid #498f6c!important; // 箭头按钮边框
  background-color: #121f1b!important; // 箭头按钮背景色
}

input如下
在这里插入图片描述
<el-input clearable v-model="name" placeholder="请输入" class="input-with-select input_box" style="width: 148px;margin: 0 40px;position: absolute;right:67px;" />

.input_box{
  // 默认状态样式更改
  height: 42px;
  --el-input-bg-color:rgba(0,0,0,0)!important;
  --el-input-border-color:#204C42!important;
  --el-input-focus-border-color:#5AC087!important;
  --el-input-hover-border-color: #5AC087!important;

  /* 只更改具有.el-input类名的元素的占位符文本样式 */
  :deep .el-input__inner::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #3E534F;
  }
  // 清除按钮
  :deep .el-input__clear {
    color: #5AC087!important;
  }
  :deep .el-input__inner {
    color: #5AC087!important; // 字体色
  }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/68904.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

栈和队列经典面试题

目录 一、括号匹配问题 20. 有效的括号 - 力扣&#xff08;LeetCode&#xff09; 题目 思路 完整代码 二、用队列实现栈 225. 用队列实现栈 - 力扣&#xff08;LeetCode&#xff09; 题目 思路 代码实现 构造一个栈 用队列实现栈的接口 第一个接口&#xff1a;创建…

小白到运维工程师自学之路 第七十二集 (半自动yum安装k8s集群)

一、准备环境 修改主机名 hostnamectl set-hostname k8s-master hostnamectl set-hostname k8s-node1 hostnamectl set-hostname k8s-node2 bashvim /etc/hosts 192.168.77.14 k8s-master 192.168.77.15 k8s-node1 192.168.77.16 k8s-node2 下载阿里源 wget -O /etc/yum…

华为路由器:IPSec加密GRE通道(GRE over IPsec)

IPSec加密GRE通道 由于GRE隧道不提供安全性保障&#xff0c;使用ipsec加密gre隧道是现网中比较常用的VPN部署&#xff0c;它的加密方式分为两种&#xff1a; 可以使用IPsec来加密隧道进行传输&#xff0c;叫做IPsec over GRE&#xff1b; 加密数据流后从隧道传输&#xff0c;…

湘大 XTU OJ 1097 排序 题解:c++ 函数库的使用 快速排序 归并排序 冒泡排序

一、链接 1097 排序 二、题目 Description N个整数&#xff0c;将其排序输出。 输入 第一行是一个整数K&#xff08;1<K<20&#xff09;&#xff0c;表示有多少个样例&#xff0c;每个样例的第一行是一个整数N&#xff08;1<N<1,000&#xff09;和一个字符X&…

探索规律:Python地图数据可视化艺术

文章目录 一 基础地图使用二 国内疫情可视化图表2.1 实现步骤2.2 完整代码2.3 运行结果 一 基础地图使用 使用 Pyecharts 构建地图可视化也是很简单的。Pyecharts 支持多种地图类型&#xff0c;包括普通地图、热力图、散点地图等。以下是一个构建简单地图的示例&#xff0c;以…

1、Spark SQL 概述

1、Spark SQL 概述 Spark SQL概念 Spark SQL is Apache Spark’s module for working with structured data. 它是spark中用于处理结构化数据的一个模块 Spark SQL历史 Hive是目前大数据领域&#xff0c;事实上的数据仓库标准。 Shark&#xff1a;shark底层使用spark的基于…

竞赛项目 深度学习的口罩佩戴检测 - opencv 卷积神经网络 机器视觉 深度学习

文章目录 0 简介1 课题背景&#x1f6a9; 2 口罩佩戴算法实现2.1 YOLO 模型概览2.2 YOLOv32.3 YOLO 口罩佩戴检测实现数据集 2.4 实现代码2.5 检测效果 3 口罩佩戴检测算法评价指标3.1 准确率&#xff08;Accuracy&#xff09;3.2 精确率(Precision)和召回率(Recall)3.3 平均精…

【立创EDA】【0】基本概念

原理图库设计 符号设计 当在元件库中没有找到需要的元件原理图符号时&#xff0c;需要自己手动绘制点击文件-新建-符号进行新建符号 封装库设计 原理图符号对应焊盘 绘制封装时&#xff0c;可以在立创商城寻找元器件对应的数据手册进行参考 PCB绘制 晶振需要包地&#xf…

ip地址修改器软件哪个好 ip地址切换器有哪些

IP地址修改器是一种常用的网络工具&#xff0c;用于修改计算机或网络设备的IP地址。在网络连接中&#xff0c;IP地址被用于标识每个设备的唯一地址&#xff0c;通过它来实现设备之间的通信和数据传输。然而&#xff0c;有时候我们需要修改IP地址以解决一些网络问题或实现特定的…

如何让你的视频在 TikTok上变得火爆?

TikTok凭借巨大的用户量和商业价值&#xff0c;它从来不缺优质内容。如何在众多内容中脱颖而出获得关注&#xff0c;这并不简单。和泛流量账号不同&#xff0c;商业账号的目的更加明确&#xff0c;也就是说&#xff0c;商业账号并不一定要以高流量最为唯一的追求目标&#xff0…

41.利用matlab 平衡方程用于图像(matlab程序)

1.简述 白平衡 白平衡的英文为White Balance&#xff0c;其基本概念是“不管在任何光源下&#xff0c;都能将白色物体还原为白色”&#xff0c;对在特定光源下拍摄时出现的偏色现象&#xff0c;通过加强对应的补色来进行补偿。 所谓的白平衡是通过对白色被摄物的颜色还原&…

【12】Git工具 协同工作平台使用教程 Gitee使用指南 腾讯工蜂使用指南【Gitee】【腾讯工蜂】【Git】

tips&#xff1a;少量的git安装和使用教程&#xff0c;更多讲快速使用上手Gitee和工蜂平台 一、准备工作 1、下载git Git - Downloads (git-scm.com) 找到对应操作系统&#xff0c;对应版本&#xff0c;对应的位数 下载后根据需求自己安装&#xff0c;然后用git --version验…

代码质量检查工具SonarQube

Devops流水线之SonarQube 文章目录 Devops流水线之SonarQube1. 软件功能介绍及用途2. 软件环境搭建与使用2.1 使用方法2.2 SonarQube相关属性说明2.3 Sonar配置文件内容说明 3. 使用环节4. 检查方法 1. 软件功能介绍及用途 SonarQube是一个用于代码质量管理的开源平台&#xf…

蓝牙运动耳机哪个好、最好的运动蓝牙耳机品牌排行

在忙碌的都市生活中&#xff0c;人们往往容易迷失方向。音乐是一种良药&#xff0c;能够使心灵平静下来&#xff0c;找到正确的方向。生命需要运动&#xff0c;而有趣的运动更能让人们自由自在&#xff0c;释放身心。因此&#xff0c;运动和音乐天然地相辅相成。当我们佩戴一款…

Redis的RDB持久化

Redis是一个键值对数据库服务器&#xff0c;服务器中通常包含着任意个非空数据库&#xff0c;而每个非空数据库中又可以包含任意个键值对&#xff0c;为了方便起见&#xff0c;我们将服务器中的非空数据库以及它们的键值对统称为数据库状态。 举个例子&#xff0c;下图展示了一…

观察者模式

观察者模式 需求1. 定义2. 组成3. 观察者模式原型图4. 实现4.1 抽象观察者4.2 抽象主题4.3 实现观察者4.4 实现主题4.5 测试 需求 实现一种天气实时更新的程序&#xff08;天气推送&#xff09;&#xff0c;当气象站数据更新后&#xff0c;天气接口程序去获取最新天气数据&…

从零开始搭建个人博客网站(hexo框架)

1.工具及环境搭建 1&#xff09;注册GitHub并且新建一个repositories 2&#xff09;下载node.js以及Git 下载链接&#xff1a; 检验安装是否成功&#xff1a; 【注】&#xff1a;MacOS自带Git&#xff0c;可以直接在终端输入git --version进行检验 3&#xff09;新建一个…

生信豆芽菜-箱线图使用说明

网站&#xff1a;http://www.sxdyc.com/visualsBoxplot 一、使用方法 1.打开网址&#xff08;http://www.sxdyc.com/singleCollectionTool?href-diff&#xff09;&#xff0c;选择“箱线图”。 准备数据&#xff1a; 第一个文件为特征的表达文件&#xff0c;第一列为样本&am…

C#,数值计算——基于模拟退火的极小化问题单纯形(下山)算法的计算方法与C#源程序

1 模拟退火 模拟退火算法其实是一个类似于仿生学的算法&#xff0c;模仿的就是物理退火的过程。 我们炼钢的时候&#xff0c;如果我们急速冷凝&#xff0c;这时候的状态是不稳定的&#xff0c;原子间杂乱无章的排序&#xff0c;能量很高。而如果我们让钢水慢慢冷凝&#xff0c…

报错 | Spring报错详解

Spring报错详解 一、前言二、报错提示三、分层解读1.最下面一层Caused by2.上一层Caused by3.最上层Caused by 四、总结五、解决方案 一、前言 本文主要是记录在初次学习Spring时遇到报错后的解读以及解决方案 二、报错提示 三、分层解读 遇到报错的时候&#xff0c;我们需要…