当前位置: 首页 > news >正文

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

用图说话↓↓↓

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

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

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

相关文章:

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

用图说话↓↓↓ 首先用代码解决黄色背景问题&#xff0c;box-shadow颜色设置透明即可&#xff0c;延时渲染时间可修改为更久 :deep(input:-webkit-autofill) {box-shadow: 0 0 0 1000px transparent !important;/* 浏览器记住密码的底色的颜色 */-webkit-text-fill-color: #f…...

C 语言中的头文件

1、C 语言中 include <> 与include “” 的区别? #include < > 引用的是编译器的类库路径里面的头文件。 #include " " 引用的是你程序目录的相对路径中的头文件&#xff0c;如果在程序目录没有找到引用的头文件则到编译器的类库路径的目录下找该头文…...

数据结构复杂度

文章目录 一. 数据结构前言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 数据结构 什么是数据结构呢&#xff1f;打开一个人的主页&#xff0c;有很…...

MySQL基础篇

一、MySQL概述 MySQL是一个数据库管理系统&#xff0c;由瑞典MySQL AB公司开发&#xff0c;属于Oracle推出的产品。MySQL是最流行的关系型数据库管理系统之一&#xff0c;在WEB应用方面&#xff0c;MySQL是最好的RDBMS&#xff08;关系数据库管理系统&#xff09; &#xff0c…...

详解C++中的四种强制转换reinterpret_cast / const_cast / static_cast / dynamic_cast

目录 1.reinterpret_cast 2.const_cast 3.static_cast 4.dynamic_cast 例子 C中存在四种强制转换&#xff1a;reinterpret_cast / const_cast / static_cast / dynamic_cast 1.reinterpret_cast 格式 &#xff1a; reinterpret_cast<type_id> (expression) 用于类型…...

Word中加载Mathtype后粘贴复制快捷键(Ctrl+C/V)不能使用

操作环境 windows 11操作系统 word版本2021 mathtype版本7.4 这个问题只出现在word中&#xff0c;在excel和ppt中都不存在这个问题&#xff0c;而且之前在另一台电脑中使用word2016版本并没有这种问题的&#xff0c;然后网上搜了一下有不少人有这种问题&#xff0c;word直接取…...

Linux硬件-bios

作者介绍&#xff1a;简历上没有一个精通的运维工程师。希望大家多多关注作者&#xff0c;下面的思维导图也是预计更新的内容和当前进度(不定时更新)。 在Linux的服务器领域&#xff0c;我们能接触的到硬件其实挺多的&#xff0c;但是在这些硬件我们根据我们的需要去使用的时候…...

VisionPro二次开发学习笔记12-使用CogToolGroup控件进行图像检测

本示例演示了如何通过图像数据库使用 CogImageFileTool&#xff0c;并将其放入 CogToolGroup 中&#xff0c;对于数据库中的每个图像运行一次检测. 当用户按下 RunTest 按钮时&#xff0c;程序执行以下操作&#xff1a; 如果工具组中没有 CogImageFileTools&#xff0c;它将显…...

mfc140u.dll丢失的科学修复手段,简单又方便的mfc140u.dll修复

遇到 "缺失 mfc140u.dll 文件" 的提示时可能会让你疑惑&#xff0c;但不用担心。这个文件是 Microsoft Visual C 2015 的重要组成部分&#xff0c;对运行特定程序非常关键。幸运的是&#xff0c;解决这一问题并不难。本文将简单指导你如何恢复或修复丢失的 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】销售订单公式问题导致系统宕机

问题现象 经过顾问反馈&#xff0c;发现系统现在出现卡顿&#xff0c;NCC一直在转圈。 问题分析 远程排查&#xff0c;发现在服务器从机上defalut-7发生了内存溢出&#xff0c;宕机。 生成了宕机日志。分析结果如下&#xff1a; 销售订单相关操作&#xff0c;vo太多了导致…...

编程-设计模式 4:建造者模式

设计模式 4&#xff1a;建造者模式 定义与目的 定义&#xff1a;建造者模式将一个复杂对象的构建与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。目的&#xff1a;该模式主要用于创建复杂对象时&#xff0c;这些对象的创建过程可能涉及多个步骤&#xff0c;…...

百度文心一言API调用,千帆大模型获取API Key和API Secret图解

百度文心一言大模型调用教程&#xff0c;获取文心一言API Key和API Secret的方法&#xff0c;码笔记mabiji.com告诉大家在百度智能云的千帆大模型平台创建应用&#xff0c;即可获取文心一言的API Key和API Secret&#xff0c;详细流程如下&#xff1a; 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目录&#xff1a;存放了脚本 config目录&#xff1a;主要存放了配置文件...

贪心算法part03

134 加油站 在一条环路上有 N 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 如果你可以绕环路行…...

以树莓集团的视角:探索AI技术如何重塑数字媒体产业发展

在科技日新月异的今天&#xff0c;AI技术如同一股不可阻挡的潮流&#xff0c;正深刻改变着我们的世界&#xff0c;尤其是数字媒体产业发展。作为数字产业生态链的杰出建设者&#xff0c;树莓集团始终站在时代前沿&#xff0c;积极探索AI技术如何为数字媒体产业注入新活力。 在树…...

package.json的 和 的区别,以及|| 和 | 的区别

在 package.json 文件中的 scripts 字段里&#xff0c;&& 和 & 用于连接不同的命令&#xff0c;它们的区别在于命令执行的方式和效果&#xff1a; &&&#xff1a; 用于串联两个命令&#xff0c;第一个命令成功&#xff08;退出码为 0&#xff09;后&#x…...

Wireshark_DNS_v7.0

Wireshark_DNS_v7.0 一、 nslookup 前置 nslookup 是一个网络命令行工具&#xff0c;用于查询域名系统&#xff08;DNS&#xff09;中的域名解析记录。通过使用 nslookup&#xff0c;你可以获取某个域名的IP地址&#xff0c;或者获取与某个IP地址关联的域名信息。 查看域名…...

阿里云的CentOS系统上安装Docker

在阿里云的CentOS系统上安装Docker的详细步骤如下&#xff1a; 一、前置条件 确保系统内核版本&#xff1a;Docker要求CentOS系统的内核版本高于3.10。你可以通过执行uname -r命令来查看当前系统的内核版本。卸载旧版本的Docker&#xff08;如果已安装&#xff09;&#xff1…...

力扣面试经典100题

进阶&#xff0c;其他解法 数组 88. 合并两个有序数组 - 力扣&#xff08;LeetCode&#xff09; 1、按非递减顺序合并两个数组 从末尾开始&#xff0c;用while分没到两个数组头&#xff0c;到第一个数组头&#xff0c;到第二个数组头三种情况 class Solution { public:voi…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

java_网络服务相关_gateway_nacos_feign区别联系

1. spring-cloud-starter-gateway 作用&#xff1a;作为微服务架构的网关&#xff0c;统一入口&#xff0c;处理所有外部请求。 核心能力&#xff1a; 路由转发&#xff08;基于路径、服务名等&#xff09;过滤器&#xff08;鉴权、限流、日志、Header 处理&#xff09;支持负…...

Appium+python自动化(十六)- ADB命令

简介 Android 调试桥(adb)是多种用途的工具&#xff0c;该工具可以帮助你你管理设备或模拟器 的状态。 adb ( Android Debug Bridge)是一个通用命令行工具&#xff0c;其允许您与模拟器实例或连接的 Android 设备进行通信。它可为各种设备操作提供便利&#xff0c;如安装和调试…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

HDFS分布式存储 zookeeper

hadoop介绍 狭义上hadoop是指apache的一款开源软件 用java语言实现开源框架&#xff0c;允许使用简单的变成模型跨计算机对大型集群进行分布式处理&#xff08;1.海量的数据存储 2.海量数据的计算&#xff09;Hadoop核心组件 hdfs&#xff08;分布式文件存储系统&#xff09;&a…...

QT3D学习笔记——圆台、圆锥

类名作用Qt3DWindow3D渲染窗口容器QEntity场景中的实体&#xff08;对象或容器&#xff09;QCamera控制观察视角QPointLight点光源QConeMesh圆锥几何网格QTransform控制实体的位置/旋转/缩放QPhongMaterialPhong光照材质&#xff08;定义颜色、反光等&#xff09;QFirstPersonC…...