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

用图说话↓↓↓

 首先用代码解决黄色背景问题,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__wrapperel-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;}

密码框同样如此,不在一一赘述,至此,成功的解决了自动填充出现背景色影响用户体验的问题

觉得有用的朋友可以点点关注!

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

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

相关文章

C++:多态及虚函数

多态&#xff1a;面向对象的多态性可以分为4类:重载多态、强制多态、包含多态和参数多态。 多态从实现的角度来讲可以划分为两类:编泽时的多态和运行时的多态 运算符重载&#xff1a; foo(i)相当于i的一个别名 前置和后置重载&#xff08;后置参数必须加一个int&#xff09; …

Ubuntu 22.04 Docker安装笔记

1、准备一台虚机 可以根据《VMware Workstation安装Ubuntu 22.04笔记》来准备虚拟机。完成后&#xff0c;根据需求安装必要的软件&#xff0c;并设置root权限进行登录。 sudo apt update sudo apt install iputils-ping -y sudo apt install vim -y允许root ssh登录&#xff1…

邀请函 I 松下信息和望繁信科技邀您参加「数智时代下大数据应用的“道”与“术”」闭门会议

在数字化浪潮席卷全球的今天&#xff0c;大数据与智能化的结合成为企业成功的关键。为了深入探讨这一重要议题&#xff0c;松下信息系统&#xff08;上海&#xff09;有限公司&#xff08;简称“松下信息”&#xff09;与上海望繁信科技有限公司&#xff08;简称“望繁信科技”…

11.面试题——消息队列RabbitMQ

1.RabbitMQ是什么&#xff1f;特点是什么&#xff1f; RabbitMQ是一种开源的消息队列中间件&#xff0c;用于在应用程序之间进行可靠的消息传递。它实现了AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议&#xff0c;提供了强大的消息处理能力。RabbitMQ的…

【数据结构与算法】二叉树

二叉树 一.二叉树的结构二.二叉树的插入1.根的插入2.其他的插入 三.二叉树的删除1.找到删除节点2.删除节点的子节点只有一个或没有3.删除节点的子节点有两个 四.完整代码 一.二叉树的结构 树的形式多种多样,但是我们最常用的还是二叉树.在二叉树中最长用的又数二叉搜索树. 这…

云原生的候选应用

前言&#xff0c;到底哪些应用适合云原生&#xff1f; 云原生应用适合于多种场景&#xff0c;‌包括高并发、‌高负载的Web应用、‌大数据处理、‌容器化应用程序、‌微服务架构、‌DevOps、‌智能物联网、‌云原生区块链应用以及大数据和机器学习。‌ 高并发、‌高负载的Web…

RuntimeError: device >= 0 device < num_gpus INTERNAL ASSERT FAILED

参考网址 https://discuss.pytorch.org/t/runtimeerror-device-0-device-num-gpus-internal-assert-failed/178118/1 今天运行GPU发现一个很特别的问题&#xff0c;就是 解决办法

Vue的事件处理、事件修饰符、键盘事件

目录 1. 事件处理基本使用2. 事件修饰符3. 键盘事件 1. 事件处理基本使用 使用v-on:xxx或xxx绑定事件&#xff0c;其中xxx是事件名&#xff0c;比如clickmethods中配置的函数&#xff0c;都是被Vue所管理的函数&#xff0c;this的指向是vm或组件实例对象 <!DOCTYPE html&g…

【路由器】RT-AC88U华硕配置DNS

公共dns ip 测试了下就119.29.29.29 为53毫秒,谷歌的8.8.8.8为55毫秒。阿里的竟然有112毫秒。阿里DNS:阿里巴巴集团提供的公共DNS服务器,其服务器分布广泛,响应速度较快。主要DNS地址:223.5.5.5、223.6.6.6。 百度DNS:百度提供的公共DNS服务器,也具有较快的响应速度。主…

【原创】springboot+mysql疫苗预约网设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

uni-app中如何使用日期选择器

uni-app中如何使用日期选择器&#xff0c;分别实现日&#xff0c;月&#xff0c;年 日 <picker mode"date" fields"day">是日的内容</picker> 月 <picker mode"date" fields"month">日期选择器</picker> 年…

C++快速理解之封装

c 成员访问限定符&#xff1a;private、protected、public 1.是什么&#xff1f; 一种权限标记&#xff0c;就是你能不能使用该类中的成员 2.为什么要用&#xff1f; 一个对象&#xff0c;由很多数据&#xff08;成员变量&#xff09;很多函数&#xff08;成员函数&#xf…

STM32常见的下载方式有三种

经过对比&#xff0c;推荐使用 SWD下载&#xff0c;只需要一个仿真器&#xff08;如jLINK、ST LINK、 CMSIS DAP 等&#xff09;&#xff0c;比较方便。 不推荐使用串口下载&#xff08;速度慢、无法仿真和调试&#xff09;和 JTAG 下载&#xff08;占用 IO 多&#xff09;。

WPF参考做的TextBox圆角,并且水印文字操作

1.首先进行 转换器操作&#xff08;获取当前Textbox Text是否为空或者空格&#xff09; / // <summary>/// 非空验证转换器/// </summary>#region String IsNullOrEmptypublic class IsNullOrEmptyConverter : IValueConverter{public object Convert(object valu…

C++——模板进阶

小伙伴们大家好啊&#xff0c;停更了两个月深表歉意&#xff0c;作者调整好了状态&#xff0c;今后将继续为大家分享C的相关知识。 在前面的模板初阶中&#xff0c;我们介绍了模板的基本类型以及用法&#xff0c;包括函数模板和类模板&#xff0c;本文我们讲对模板进行更深入的…

ffmpeg -- 常用口令

文章目录 1.视频格式转换2.设置比特率3.设置帧率4.强制让输入视频帧率为1&#xff0c;输出视频帧率为245.长视频截短6.自动分割视频的bash脚本7.每一帧都保存成图片 1.视频格式转换 ffmpeg -i input.avi output.mp42.设置比特率 ffmpeg -i input.avi -b:v 64k -bufsize 64k o…

甄选范文“论负载均衡技术在Web系统中的应用”软考高级论文系统架构设计师论文

论文真题 负载均衡技术是提升Web系统性能的重要方法。利用负载均衡技术, 可将负载(工作任务) 进行平衡、分摊到多个操作单元上执行, 从而协同完成工作任务, 达到提升Web系统性能的目的。 请围绕“负载均衡技术在Web系统中的应用”论题, 依次从以下三个方面进行论述。 1.…

【ARM】ULINK Pro如何和SWD接口进行连接调试

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决ULINK Pro和JTAR接口进行连接问题。 2、 问题场景 因为ULINK Pro本身自带的接口是Cortex-M ETM Interface 20-pin Connector。所以无法和JTAR接口直接进行连接。 图2-1 3、软硬件环境 1&#xff09;、软件版…

【微信小程序实战教程】之微信小程序中的 JavaScript

微信小程序中的 JavaScript 微信小程序的业务逻辑都是通过JavaScript语言来实现的&#xff0c;本章我们将详细的讲解JavaScript的基本概念&#xff0c;以及在小程序中如何使用JavaScript语言。JavaScript是一种轻量的、解释型的、面向对象的头等函数语言&#xff0c;是一种动态…

vue 开发工具 Hbuilder 简介及应用

一、简介 HBuilderX 是一款流行的前端开发工具&#xff0c;由DCloud公司开发。它支持多种编程语言&#xff0c;如HTML、CSS、JavaScript、Vue、UniApp等&#xff0c;非常适合用来开发Web应用、移动端应用和跨平台应用。 官网地址&#xff1a;https://www.dcloud.io/hbuilderx.…