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

首先用代码解决黄色背景问题,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…...
OpenClaw日志分析技能:千问3.5-27B自动排查错误信息
OpenClaw日志分析技能:千问3.5-27B自动排查错误信息 1. 为什么需要自动化日志分析 作为一名长期与代码打交道的开发者,我每天至少有30%的时间花在查看日志上。从服务器报错到应用崩溃,从性能瓶颈到数据异常,日志就像系统的"…...
深度解析RPA格式:如何用unrpa突破Ren‘Py游戏资源的技术壁垒
深度解析RPA格式:如何用unrpa突破RenPy游戏资源的技术壁垒 【免费下载链接】unrpa A program to extract files from the RPA archive format. 项目地址: https://gitcode.com/gh_mirrors/un/unrpa 当你面对一个RenPy引擎开发的视觉小说游戏,想要…...
Intv_AI_MK11 Python数据分析搭档:环境配置与自动化脚本生成
Intv_AI_MK11 Python数据分析搭档:环境配置与自动化脚本生成 1. 为什么需要AI辅助的数据分析环境 数据分析师每天要处理大量重复性工作:数据清洗、报告撰写、图表生成。这些工作既耗时又容易出错。Intv_AI_MK11作为新一代AI助手,可以帮你自…...
从视频收藏到内容管理:BilibiliDown图形化下载器深度解析
从视频收藏到内容管理:BilibiliDown图形化下载器深度解析 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirror…...
新手入门:在快马平台用基础代码实现个人EndNote
最近在整理学术资料时,发现需要频繁记录和分类文献信息。作为编程新手,想尝试自己做个简单的网页工具来管理这些内容。通过InsCode(快马)平台的智能生成功能,居然用基础代码就实现了一个迷你EndNote,整个过程特别适合像我这样的初…...
牛批了,大佬汉化版,非常实用
今天给大家推荐一款U盘容量检测工具,一款是注册表修复工具,有需要的小伙伴可以下载收藏。 第一款:validrive 市面上的U盘很多是假冒伪劣产品,有的U盘标着1T或者2T的存储空间,但实际上可能只有32G或者64G。 想要知道到底…...
3个创新点让游戏优化工具实现高效资源管理
3个创新点让游戏优化工具实现高效资源管理 【免费下载链接】sguard_limit 限制ACE-Guard Client EXE占用系统资源,支持各种腾讯游戏 项目地址: https://gitcode.com/gh_mirrors/sg/sguard_limit 你是否曾遇到这样的场景:激战正酣时画面突然定格&a…...
3分钟掌握WindowResizer:告别Windows窗口尺寸烦恼的终极解决方案
3分钟掌握WindowResizer:告别Windows窗口尺寸烦恼的终极解决方案 【免费下载链接】WindowResizer 一个可以强制调整应用程序窗口大小的工具 项目地址: https://gitcode.com/gh_mirrors/wi/WindowResizer 还在为那些顽固的Windows窗口尺寸问题而烦恼吗&#x…...
Qwen3Guard安全模型HTTPS部署:保姆级Nginx反向代理配置指南
Qwen3Guard安全模型HTTPS部署:保姆级Nginx反向代理配置指南 1. 引言 1.1 为什么需要HTTPS部署 在当今数字化环境中,内容安全审核已成为各类在线平台的基础需求。Qwen3Guard作为阿里开源的安全审核模型,能够有效识别和过滤不安全内容。然而…...
如何在Windows系统上3分钟搞定PDF处理:Poppler预编译包终极指南
如何在Windows系统上3分钟搞定PDF处理:Poppler预编译包终极指南 【免费下载链接】poppler-windows Download Poppler binaries packaged for Windows with dependencies 项目地址: https://gitcode.com/gh_mirrors/po/poppler-windows 还在为Windows上的PDF处…...
