完美解决浏览器的输入框自动填入时,黄色背景问题,以及图标被遮住问题(最新)
用图说话↓↓↓

首先用代码解决黄色背景问题,box-shadow颜色设置透明即可,延时渲染时间可修改为更久
:deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #fff !important;/* 浏览器记住密码的字的颜色 */transition: background-color 300000s ease-in-out 0s;/* 通过延时渲染背景色变相去除背景颜色 */}
但问题来了,自动填充时输入框为透明,那么图标也没了
这里有一个误区,阴影和背景色不同,调整那个1000px会发现它作用范围很广,且不在输入框内,具体的原因暂时也没参透,总之把黄色背景给消除了
接下来怎么处理图标?
我们来看下dom元素的构成
<el-form-item prop="username"><el-input class="user" v-model="ruleForm.username" :placeholder="$t('LP.username')" type="text"autocomplete="off" /></el-form-item><el-form-item prop="password"><el-input class="password" v-model="ruleForm.password" :placeholder="$t('LP.password')"type="password" autocomplete="off" /></el-form-item>
F12 打开控制面板我们可以看到

这里使用的是el-input 在渲染时会分为两部分:el-input__wrapper和el-input__inner
此时,图标应该是在输入框内部el-input__inner中,那把图标拿到外部el-input__wrapper试试?
图标和文字一定要是分开的,我们通常会使用padding给图标腾出位置
:deep(.el-input__inner){padding-left: 30px;
}
但现在不用,我们使用margin
:deep(.user) .el-input__inner {margin-left: 30px; }
并且将原本在inner中的图标移动到wrapper里
:deep(.user .el-input__wrapper) {background-image: url('../assets/login/login_user.png');background-repeat: no-repeat;background-position: 13px 13px;background-color: #07397D;}
密码框同样如此,不在一一赘述,至此,成功的解决了自动填充出现背景色影响用户体验的问题
觉得有用的朋友可以点点关注!
相关文章:
完美解决浏览器的输入框自动填入时,黄色背景问题,以及图标被遮住问题(最新)
用图说话↓↓↓ 首先用代码解决黄色背景问题,box-shadow颜色设置透明即可,延时渲染时间可修改为更久 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…...
C 语言中的头文件
1、C 语言中 include <> 与include “” 的区别? #include < > 引用的是编译器的类库路径里面的头文件。 #include " " 引用的是你程序目录的相对路径中的头文件,如果在程序目录没有找到引用的头文件则到编译器的类库路径的目录下找该头文…...
数据结构复杂度
文章目录 一. 数据结构前言1.1 数据结构1.2 算法 二. 算法效率2.1 时间复杂度2.1.1 T(N)函数式2.1.2 大O的渐进表示法 2.2 空间复杂度2.3 常见复杂度比较 2.3 复杂度算法题1.2. 一. 数据结构前言 1.1 数据结构 什么是数据结构呢?打开一个人的主页,有很…...
MySQL基础篇
一、MySQL概述 MySQL是一个数据库管理系统,由瑞典MySQL AB公司开发,属于Oracle推出的产品。MySQL是最流行的关系型数据库管理系统之一,在WEB应用方面,MySQL是最好的RDBMS(关系数据库管理系统) ,…...
详解C++中的四种强制转换reinterpret_cast / const_cast / static_cast / dynamic_cast
目录 1.reinterpret_cast 2.const_cast 3.static_cast 4.dynamic_cast 例子 C中存在四种强制转换:reinterpret_cast / const_cast / static_cast / dynamic_cast 1.reinterpret_cast 格式 : reinterpret_cast<type_id> (expression) 用于类型…...
Word中加载Mathtype后粘贴复制快捷键(Ctrl+C/V)不能使用
操作环境 windows 11操作系统 word版本2021 mathtype版本7.4 这个问题只出现在word中,在excel和ppt中都不存在这个问题,而且之前在另一台电脑中使用word2016版本并没有这种问题的,然后网上搜了一下有不少人有这种问题,word直接取…...
Linux硬件-bios
作者介绍:简历上没有一个精通的运维工程师。希望大家多多关注作者,下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 在Linux的服务器领域,我们能接触的到硬件其实挺多的,但是在这些硬件我们根据我们的需要去使用的时候…...
VisionPro二次开发学习笔记12-使用CogToolGroup控件进行图像检测
本示例演示了如何通过图像数据库使用 CogImageFileTool,并将其放入 CogToolGroup 中,对于数据库中的每个图像运行一次检测. 当用户按下 RunTest 按钮时,程序执行以下操作: 如果工具组中没有 CogImageFileTools,它将显…...
mfc140u.dll丢失的科学修复手段,简单又方便的mfc140u.dll修复
遇到 "缺失 mfc140u.dll 文件" 的提示时可能会让你疑惑,但不用担心。这个文件是 Microsoft Visual C 2015 的重要组成部分,对运行特定程序非常关键。幸运的是,解决这一问题并不难。本文将简单指导你如何恢复或修复丢失的 mfc140u.d…...
RabbitMQ、Kafka对比(超详细),Kafka、RabbitMQ、RocketMQ的区别
文章目录 一、kafka和rabbitmq全面对比分析1.1 简介1.2 kafka和rabbitmq全面对比分析1.3 影响因素 二、RabbitMQ、Kafka主要区别2.1 详解/主要区别2.1.1 设计目标和适用场景2.1.2 架构模型方面2.1.3 吞吐量和性能2.1.4 消息存储和持久化2.1.5 消息传递保证2.1.6 集群负载均衡方…...
【案例35】销售订单公式问题导致系统宕机
问题现象 经过顾问反馈,发现系统现在出现卡顿,NCC一直在转圈。 问题分析 远程排查,发现在服务器从机上defalut-7发生了内存溢出,宕机。 生成了宕机日志。分析结果如下: 销售订单相关操作,vo太多了导致…...
编程-设计模式 4:建造者模式
设计模式 4:建造者模式 定义与目的 定义:建造者模式将一个复杂对象的构建与其表示分离,使得同样的构建过程可以创建不同的表示。目的:该模式主要用于创建复杂对象时,这些对象的创建过程可能涉及多个步骤,…...
百度文心一言API调用,千帆大模型获取API Key和API Secret图解
百度文心一言大模型调用教程,获取文心一言API Key和API Secret的方法,码笔记mabiji.com告诉大家在百度智能云的千帆大模型平台创建应用,即可获取文心一言的API Key和API Secret,详细流程如下: 1、在百度智能云的千帆大…...
kafka下载|安装
1、下载kafka https://kafka.apache.org/downloads 2、安装kafka 解压下载的kafka安装包即可 tar -xvf kafka_2.13-3.7.0.tgz -C /usr/local/3、查看kafka目录 bin目录:存放了脚本 config目录:主要存放了配置文件...
贪心算法part03
134 加油站 在一条环路上有 N 个加油站,其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车,从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发,开始时油箱为空。 如果你可以绕环路行…...
以树莓集团的视角:探索AI技术如何重塑数字媒体产业发展
在科技日新月异的今天,AI技术如同一股不可阻挡的潮流,正深刻改变着我们的世界,尤其是数字媒体产业发展。作为数字产业生态链的杰出建设者,树莓集团始终站在时代前沿,积极探索AI技术如何为数字媒体产业注入新活力。 在树…...
package.json的 和 的区别,以及|| 和 | 的区别
在 package.json 文件中的 scripts 字段里,&& 和 & 用于连接不同的命令,它们的区别在于命令执行的方式和效果: &&: 用于串联两个命令,第一个命令成功(退出码为 0)后&#x…...
Wireshark_DNS_v7.0
Wireshark_DNS_v7.0 一、 nslookup 前置 nslookup 是一个网络命令行工具,用于查询域名系统(DNS)中的域名解析记录。通过使用 nslookup,你可以获取某个域名的IP地址,或者获取与某个IP地址关联的域名信息。 查看域名…...
阿里云的CentOS系统上安装Docker
在阿里云的CentOS系统上安装Docker的详细步骤如下: 一、前置条件 确保系统内核版本:Docker要求CentOS系统的内核版本高于3.10。你可以通过执行uname -r命令来查看当前系统的内核版本。卸载旧版本的Docker(如果已安装)࿱…...
力扣面试经典100题
进阶,其他解法 数组 88. 合并两个有序数组 - 力扣(LeetCode) 1、按非递减顺序合并两个数组 从末尾开始,用while分没到两个数组头,到第一个数组头,到第二个数组头三种情况 class Solution { public:voi…...
全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版!!!6.8截至答题,大家注意呀! 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:( B ) A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
【论文阅读28】-CNN-BiLSTM-Attention-(2024)
本文把滑坡位移序列拆开、筛优质因子,再用 CNN-BiLSTM-Attention 来动态预测每个子序列,最后重构出总位移,预测效果超越传统模型。 文章目录 1 引言2 方法2.1 位移时间序列加性模型2.2 变分模态分解 (VMD) 具体步骤2.3.1 样本熵(S…...
python报错No module named ‘tensorflow.keras‘
是由于不同版本的tensorflow下的keras所在的路径不同,结合所安装的tensorflow的目录结构修改from语句即可。 原语句: from tensorflow.keras.layers import Conv1D, MaxPooling1D, LSTM, Dense 修改后: from tensorflow.python.keras.lay…...
【JavaSE】多线程基础学习笔记
多线程基础 -线程相关概念 程序(Program) 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序,比如我们使用QQ,就启动了一个进程,操作系统就会为该进程分配内存…...
[ACTF2020 新生赛]Include 1(php://filter伪协议)
题目 做法 启动靶机,点进去 点进去 查看URL,有 ?fileflag.php说明存在文件包含,原理是php://filter 协议 当它与包含函数结合时,php://filter流会被当作php文件执行。 用php://filter加编码,能让PHP把文件内容…...
Linux操作系统共享Windows操作系统的文件
目录 一、共享文件 二、挂载 一、共享文件 点击虚拟机选项-设置 点击选项,设置文件夹共享为总是启用,点击添加,可添加需要共享的文件夹 查询是否共享成功 ls /mnt/hgfs 如果显示Download(这是我共享的文件夹)&…...
CMS内容管理系统的设计与实现:多站点模式的实现
在一套内容管理系统中,其实有很多站点,比如企业门户网站,产品手册,知识帮助手册等,因此会需要多个站点,甚至PC、mobile、ipad各有一个站点。 每个站点关联的有站点所在目录及所属的域名。 一、站点表设计…...
【Vue】scoped+组件通信+props校验
【scoped作用及原理】 【作用】 默认写在组件中style的样式会全局生效, 因此很容易造成多个组件之间的样式冲突问题 故而可以给组件加上scoped 属性, 令样式只作用于当前组件的标签 作用:防止不同vue组件样式污染 【原理】 给组件加上scoped 属性后…...
软件工程教学评价
王海林老师您好。 您的《软件工程》课程成功地将宏观的理论与具体的实践相结合。上半学期的理论教学中,您通过丰富的实例,将“高内聚低耦合”、SOLID原则等抽象概念解释得十分透彻,让这些理论不再是停留在纸面的名词,而是可以指导…...
