input框自动填充内容背景颜色为黄色解决方法

最新推荐文章于 2025-08-19 11:43:43 发布
原创 最新推荐文章于 2025-08-19 11:43:43 发布 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍如何通过CSS样式修改或禁用谷歌浏览器中自动填充表单时产生的黄色背景。提供两种方法：一是使用CSS伪类进行背景颜色覆盖；二是通过设置表单属性autocomplete为'off'来关闭自动填充功能。
部署运行你感兴趣的模型镜像
谷歌浏览器input自动填充内容，背景色会是黄色，想改的话：
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset;}


这种点击框也不会出现黄色了

input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;}

还有一种就是关闭自动填充autocomplete="off"

<form action="loginAction" method="post" autocomplete="off">


您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型，相比 3.0 版本，它提升了图像质量、运行速度和硬件效率

如何修改 chrome 记住密码后自动填充表单的黄色背景？
liuhao9999的博客
03-23 773
chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的in put表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： { background-color:rgb(250,255,189)!important; background-image:none!important; color:rgb(0,0,0)!important; } 对chrome默认定义的background-color，backg
【html】巧妙解决input标签自动填充问题
热门推荐
汪小穆的博客
05-31 5万+
前言：如果是同域名网站，并且曾经在该网站下登录过账号密码，并且选择了记住账号密码。chrome浏览器会对账号密码进行自动填充功能，虽然这功能给我们提供了很多方便，但是也带来了些困扰。 一、问题起始 ①当“密码”那项input的type是text的时候并不会出现问题 <label> <span>卡号:</span> <input...
input输入框自动填充黄色背景解决方案
liyujun1989的专栏
08-25 1万+
**chrome表单自动填充后，input文本框的背景会变成偏黄色的，这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式： input:-webkit-autofill { background-color: #FAFFBD; background-image: none; color: #000
input 自动填充颜色改变
m0_50082421的博客
12-26 1155
最近在项目中使用 input 自动填充昂账号，选择完账号之后输入框的会有背景颜色，所以需要更改输入框背景。
修改input框默认黄色背景
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
11-02 1257
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {     background-color: rgb(0, 0, 0) !important;     background-image: none !important;     color: rgb(0, 0, 0) !important;  ...
input自动填充背景颜色问题
weixin_53539322的博客
12-11 365
前端input自动填充背景色无法取消问题
chrome表单自动填充导致input文本框背景变成偏黄色问题解决
09-25
在使用谷歌浏览器（Chrome）时，用户可能会遇到一个常见的视觉问题，即当表单启用自动填充功能后，`input` 文本框的背景颜色会变为一种偏黄色（#FAFFBD）。这个问题是由于 Chrome 浏览器为了区分自动填充的信息，会...
Input框自动填充背景色
05-30
如果你想要实现input框的自动填充背景色效果，可以使用CSS中的:-webkit-autofill伪类。这个伪类是Webkit内核浏览器（如Chrome、Safari）所支持的，可以针对自动填充的input框进行样式设置。例如，将自动填充的背景色...
去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景
09-25
然而，对于自动填充的背景颜色问题，目前缺乏直接的CSS解决方案，可能需要借助JavaScript或其他技术手段进行处理。在实际开发中，我们需要考虑不同浏览器的兼容性和用户友好性，以提供最佳的用户体验。
input 自动填充导致的背景色问题
weixin_43866627的博客
08-20 228
input:-internal-autofill-previewed,input:-internal-autofill-selected { transition: background-color 999999s ease-out 0.5s;}
【前端】小tips：解决input标签的自动填充背景问题且可以更改字体颜色（适用于Google等较高版本浏览器）
rensheng2020的博客
01-17 1526
解决input标签的自动填充背景问题且可以更改字体颜色。
input:-webkit-autofill:输入框自动填充背景问题
weixin_53577099的博客
02-26 442
但这种方式并不适合设置透明背景， 如下图 ，透明阴影加上了，但自动填充的白色还在，适合底色是白色的输入框。第二种： 延长自动填充背景色的时间，就是让颜色填充在“一万年”以后实现， 这样短时间就看不到啦。问题：如图，如果input快速选择之前记录的账号密码会出现，不一样的背景色。
input 输入框 在自动填充时，背景颜色问题
m0_55720439的博客
10-13 3535
问题: 自动填充前： 自动填充后： 可以看出，自动填充后，input背景颜色变成了别的颜色, 解决办法： 方法一： 纯色阴影覆盖底色 input:-webkit-autofill { box-shadow: 0 0 0 1000px #333333 inset; -webkit-text-fill-color: #fff; } 填充后的效果 注意： 这个方法有个问题，就是input 输入框，不能有 圆角(border-radius)，而且只适用于...
谷歌浏览器自动填写input框，会挡住input中背景图的问题解决方法
qq_40288956的博客
02-23 1048
谷歌浏览器对输入框输入的内容存在记忆，当用浏览器记忆的内容填写input框时，就会把input框的背景图片遮挡住，并且修改字体的颜色，以下是对此问题的解决办法
input自动填充背景变黄
m0_37142141的博客
07-09 697
.el-input__inner {-webkit-appearance:none; } .el-input__inner:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px white inset; -webkit-text-fill-color: #333333; } .el-input__inner:-webkit-autofill, .el-input__inner:-webkit-autofill:hover, .el-in.
解决input自动填充背景颜色问题
最新发布
xuefeng11111的博客
08-19 192
edge浏览器input自动填充总是会导致出现背景色, 比较难看, 网上找了半天才找到解决方案, 不一定是最优的, 但是目前找到的可用方案。
INPUT自动填充时候出现背景色问题
jorlin_sun的博客
08-06 240
INPUT自动填充时候出现背景色问题
input换背景框
海北军
02-11 193
//html部分&lt;span style="height:15px;line-height: 15px;position:relative" &gt;                    &lt;input class="back_checked" type="checkbox" &gt;&lt;s&gt;&lt;/s&gt;&lt;/span&gt;//css部
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值