当前位置: 首页 > 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…...

让 AI Agent “睡觉”整理记忆(非常详细),OpenClaw Auto-Dream 实战从入门到精通,收藏这一篇就够了!

你有没有遇到过这样的情况&#xff1a;辛辛苦苦教会了 AI Agent 你的工作习惯和项目背景&#xff0c;关掉窗口、重启会话后&#xff0c;它又变回了一张白纸&#xff1f;这是当前所有基于 LLM&#xff08;大语言模型&#xff09;的 Agent 面临的核心痛点——“聊完就忘”。2026 …...

新手必看!圣女司幼幽-造相Z-Turbo开箱即用,3步生成精美古风人像

新手必看&#xff01;圣女司幼幽-造相Z-Turbo开箱即用&#xff0c;3步生成精美古风人像 你是不是也遇到过这样的烦恼&#xff1a;脑子里构思好了一位仙气飘飘的古风角色&#xff0c;但要么自己不会画&#xff0c;要么用普通AI工具生成的效果总差那么点意思——衣服质感像塑料&…...

保姆级教程:在Ubuntu服务器上用Docker一键部署华为MindIE,快速搭建LLM私有化API服务

保姆级教程&#xff1a;在Ubuntu服务器上用Docker一键部署华为MindIE&#xff0c;快速搭建LLM私有化API服务 当企业需要将大语言模型&#xff08;LLM&#xff09;能力整合到内部系统时&#xff0c;私有化部署成为刚需。华为MindIE作为昇腾AI生态的重要组件&#xff0c;通过容器…...

DeepAnalyze模型量化部署实战:减小50%显存占用

DeepAnalyze模型量化部署实战&#xff1a;减小50%显存占用 1. 引言 你是不是遇到过这样的情况&#xff1a;好不容易找到一个强大的AI模型&#xff0c;比如最近很火的DeepAnalyze数据分析大模型&#xff0c;结果发现自己的显卡根本跑不起来&#xff1f;8GB显存的消费级显卡只能…...

“你用AI,那我也会用AI,我还要你干什么?”

这个代码的核心功能是&#xff1a;基于输入词的长度动态选择反义词示例&#xff0c;并调用大模型生成反义词&#xff0c;体现了 “动态少样本提示&#xff08;Dynamic Few-Shot Prompting&#xff09;” 与 “上下文长度感知的示例选择” 的能力。 from langchain.prompts impo…...

KernelSU低版本内核适配实战指南:突破Linux 4.14+设备的技术瓶颈

KernelSU低版本内核适配实战指南&#xff1a;突破Linux 4.14设备的技术瓶颈 【免费下载链接】KernelSU A Kernel based root solution for Android 项目地址: https://gitcode.com/GitHub_Trending/ke/KernelSU 问题溯源&#xff1a;旧内核设备的Root困境 在Android设备…...

企业网络准入实战:用华三WX2540H和深信服AC搞定有线无线统一Portal认证(附OA集成)

企业级网络准入实战&#xff1a;华三WX2540H与深信服AC协同部署全攻略 当企业网络规模扩张到数百个终端时&#xff0c;传统MAC地址绑定和静态VLAN分配的管理方式就会暴露出明显短板。某制造企业IT主管张工最近就遇到了这样的困扰&#xff1a;研发部门的访客需要临时网络接入时&…...

自动驾驶规划新范式:像人一样用‘矢量关系’思考,VAD三大安全约束详解

自动驾驶规划新范式&#xff1a;像人一样用‘矢量关系’思考&#xff0c;VAD三大安全约束详解 想象一下&#xff0c;在高峰时段的城市十字路口&#xff0c;人类驾驶员能瞬间判断左侧公交车的变道意图&#xff0c;同时预判右前方自行车可能出现的摇摆——这种基于空间关系的直觉…...

Visual Studio快捷键全攻略:提升编码效率的必备技巧

1. Visual Studio快捷键&#xff1a;程序员的效率加速器 第一次用Visual Studio写代码时&#xff0c;我像个无头苍蝇一样在菜单栏里到处找功能。直到同事看我操作实在忍无可忍&#xff0c;甩给我一份快捷键清单——那天我才知道&#xff0c;原来按F5就能直接调试&#xff0c;Ct…...

告别背包焦虑:TQVaultAE如何彻底改变《泰坦之旅》装备管理体验

告别背包焦虑&#xff1a;TQVaultAE如何彻底改变《泰坦之旅》装备管理体验 【免费下载链接】TQVaultAE Extra bank space for Titan Quest Anniversary Edition 项目地址: https://gitcode.com/gh_mirrors/tq/TQVaultAE 对于《泰坦之旅》玩家来说&#xff0c;最令人沮丧…...