chrom浏览器下input标签当auto-complete的时候背景色变黄色同时icon图标消失的解决方案

最新推荐文章于 2024-08-29 08:12:38 发布
最新推荐文章于 2024-08-29 08:12:38 发布
阅读量1.8k 收藏 2
点赞数 2
分类专栏： 前端css input
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32230477/article/details/75149242
版权
在Chrome浏览器中，当input标签启用auto-complete功能时，会出现背景变为黄色且图标消失的问题。为解决这一问题，可以修改CSS，针对-webkit-autofill状态的input设置背景颜色和图片，同时为图标元素设置z-index，确保其显示。通过这些调整，成功解决了登录界面自动填充时的显示异常。
摘要由CSDN通过智能技术生成

做项目登录界面时，用户名密码框在Chrome自动填充时，input中的背景框会被黄色背景遮住，而且icon会消失，完美解决方案：

1.下面先解决黄色背景问题

原因如下chrom默认有如下样式，如果尝试在form层添加auto-complete=”

最低0.47元/天 解锁文章
qq_32230477
关注
专栏目录
chrome自动填表会遮挡input中背景图的问题解决方法
Apollo47的专栏
09-09 4559
在做某项目登录界面时，发现用户密码框在Chrome自动填充时，input中的背景框会被遮住。网上也搜了一下，没有一个有效的解决方法。 来看csdn的登录界面，也有这个问题。 后来在浏览网页时，无意中发现某网站的登录页面没有这个问题，于是分析了下它的css，照着试了一下，真的完美解决。我做的效果： 原理很简单，下面一个 div，上面放 div(显示图片) + inp
前端2020面试题195道
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案...
dc1339485的博客
04-24 420
最近在改一个bug即如标题所讲的一样，chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了。为此百度了好久发现网上说的使用js来append操作，亲测了都不管用。除非把autocomplete=“off”关了，但这就不符合需求了 如图 网上说的改变-webkit-autofill的阴影背景是可以去除黄...
探索高效自动完成组件：@ngui/auto-complete
最新发布
gitblog_00473的博客
08-29 777
探索高效自动完成组件：@ngui/auto-complete auto-completeAngular Auto Complete component and directive项目地址:https://gitcode.com/gh_mirrors/aut/auto-complete 在现代Web开发中，用户界面的交互体验至关重要。自动完成（AutoComplete）组件作为提升用户体验的关键元...
谷歌浏览器自动填写input框，会挡住input中背景图的问题解决方法
qq_40288956的博客
02-23 863
谷歌浏览器对输入框输入的内容存在记忆，当用浏览器记忆的内容填写input框时，就会把input框的背景图片遮挡住，并且修改字体的颜色，以下是对此问题的解决办法
input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
weixin_33912246的博客
08-26 602
填写form表单时发现chrome的一个好坑啊！ 当你之前有填写过表单，获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东，就像这样：（抱歉丑了点，隐私问题打上了马赛克） 按理说，这没什么问题，很多时候为了方便，也需要它记录输入，但是，同时也发现，文本框变成了屎黄色了！而且当你选择其中的文本时它依然还是屎黄色！ 真是卧槽了...... 这完全不是我想要的效果啊，谁愿...
HTML ＜input＞ 标签的 autocomplete 属性
songjuntao8的专栏
09-07 6327
定义和用法 autocomplete 属性规定输入字段是否应该启用自动完成功能。 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。 注释：autocomplete 属性适用于 <form>，以及下面的 <input> 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。 提示：在某些浏览器中，您可能需要手动
关于input自带的自动补全的功能——autocomplete
热门推荐
weixin_37575140的博客
01-10 1万+
纪念一下，这是我的第一篇在C站上的博客~撒花~ autocomplete 属性规定输入字段是否应该启用自动完成功能。默认情况下是启动的，也就是当你点击了input获取焦点之后浏览器会自动将以前的输入记录作为填入选项显示出来。这个是HTML5中的新属性，在不支持HTML5的浏览器下是没有用的。 注释：autocomplete 属性适用于 ，以及下面的 类型：text, search, ur
input里面放iconfont图标，placeholder属性样式修改，vue简单监听input输入框输入内容则iconfont消失，图标反转
vicky_yongqi的博客
09-13 2827
效果 vue项目，用stylus处理css样式 input放图标 <div class="jobs_input_wrapper"> <input class="input_text" type="text" placeholder="搜索" v-model="userinput"> <i class="icon iconfont icon-sousuo" v-if="isicon"></i> </div> ps：这里利用绝对定位
解决chrome浏览器html页面保存用户名密码导致的样式改变
J_S_King的博客
08-28 1017
input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: #ededed !important; -webkit-box-shadow: 0 0 0px 1000px transparent inset !important...
去掉chrome下input样式
guozpchina的专栏
11-21 904
取消chrome下input和textarea的聚焦边框： input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大： textarea{resize:none}
input autocomplete
catherine的博客
12-26 1592
input 的属性autocomplete 默认为on 其含义代表是否让浏览器自动记录之前输入的值 很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到 可以在input中加入autocomplete="off" 来关闭记录 系统需要保密的情况下可以使用此参数...
element中el-input 输入框 在自动填充（auto-complete=“on“）时，背景颜色会自动改变问题
zy的博客
08-29 1790
element中el-input 输入框 在自动填充（auto-complete="on"）时，背景颜色会自动改变问题
Chrome浏览器记住密码后input框黄色背景且背景图片不显示的问题
weixin_30633405的博客
08-03 812
Chrome浏览器记住密码后再进入登录页后，输入框背景颜色变为黄色，字体颜色变成#000黑色，且添加的背景图片也那不显示了，进入审查元素后，发现浏览器默认给输入框添加了样式，并且无法通过important修改 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { bac...
input 的属性autocomplete
weixin_30765319的博客
10-25 81
input 的属性autocomplete默认为on 其含义代表是否让浏览器自动记录之前输入的值 很多时候，需要对客户的资料进行保密，防止浏览器软件或者恶意插件获取到 可以在input中加入autocomplete="off" 来关闭记录 系统需要保密的情况下可以使用此参数 转载于:https://www.cnblogs.com/chenlongsheng/p/9847...
去除input自动填充时的背景色
xxitcef的博客
06-23 5940
我想应该做过登录的页面的同学都遇到过这样的问题,input的自动填充功能会带有背景色，这样会影响美观，如下图 要想去掉这个背景色有两种方法： 1.给input设置属性autocomplete=“off”，意为关闭自动填充，不记录之前输入过的值。完全可以解决背景色的问题，但是没有自动填充功能体验相对来说不是很友好 2.通过css样式： <style lang="less"> input:-webkit-autofill { box-shadow:0 0 0 1000px white
谷歌浏览器中input自动填充默认背景色解决方法
weixin_43822182的博客
04-11 4889
谷歌浏览器中input自动填充默认背景色解决方法1.input背景为半透明背景图2.input背景为纯色背景 1.input背景为半透明背景图 input:-webkit-autofill { -webkit-animation: autofill-fix1 1s infinite; /**利用动画方式将背景图遮挡住*/ -webkit-text-fill-color: #94cc...
input与button按钮背景图失效不显示的解决办法
weixin_30706507的博客
11-27 558
今天做公司的某个网站前端网页页面的时候笔者又遇到了难解决的网页前端DIVCSS代码问题，一个平时不会发生的怪事情发生了：为网页代码中的Form表单中的input 和 button 按钮标签在CSS样式代码文件中设置了背景图background-image竟然失效不起作用不显示了！笔者查看了这个代码在IE、火狐等各浏览器下的 浏览效果，尽管该代码在DW(DreamWeaver)中显示正常，...
input 选自动填充，去除浏览器自动填充后样式
Teemo_shape的博客
05-12 1045
自动填充后，本来黑色的背景色变白，字体变黑。 input:-webkit-autofill { -webkit-text-fill-color: #fff; // 设置填充不变色 transition: background-color 50000s ease-in-out 0s; } input:-internal-autofill-previewed, input:-internal-autofill-selected { -webkit-text-fi...
python打开chrom浏览器闪退解决办法
06-11
如果你在使用 Python 的 selenium 库时打开 Chrome 浏览器时出现闪退，可能是由于 Chrome 版本与 ChromeDriver 版本不匹配引起的。你可以尝试以下几种解决办法： 1. 更新 Chrome 浏览器和 ChromeDriver 到最新版本...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值