chrome浏览器input:-webkit-autofill默认填充背景色和字体颜色的修改

最新推荐文章于 2025-03-27 08:12:43 发布
置顶 最新推荐文章于 2025-03-27 08:12:43 发布
阅读量4.6k 收藏
点赞数 3
CC 4.0 BY-SA版权
分类专栏： chrome 文章标签： -webkit-autofill input背景色修改 input字体颜色修改
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/gis_zhouda/article/details/83826644
本文探讨了Chrome浏览器中用户名密码自动填充所使用的特殊样式input:-webkit-autofill，并提供了修改背景色和字体颜色的方法，以解决样式覆盖难题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

       chrome浏览器对用户名密码的自动填充使用了样式input:-webkit-autofill，其中就包括了background-color,color属性，该样式优先级很高，无法通过其他样式覆盖，蛋疼。。。

       背景色修改：

-webkit-box-shadow: 0 0 0px 1000px blue inset;

       字体颜色修改：

-webkit-text-fill-color: #ffffff;
取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题
weixin_41346436的博客
10-24 763
【代码】取消element-ui中账号和密码登录功能浏览器默认的填充色，element-ui登录账号密码输入框禁用浏览器默认填充色问题。
input:-webkit-autofill
热门推荐
珍妮的小罐君
09-14 1万+
chrome表单input获取焦点时，input会有一个记录之前填写过的文本的下拉列表式的东东，当你选择其中一个时，input文本框的背景会变成黄色的（如下图），这是由于chrome会默认给input加上input:-webkit-autofill私有属性，然后对其赋予以下样式： input:-webkit-autofill, textarea:-webkit-autofill, s
浏览器探究——webkit部分——HTMLinput标签
whotodo
03-23 221
浏览器探究——webkit部分——HTMLinput标签 测试页面 <html> <body> First name: <input type="text"name="fname" /> Last name: <input type="text"name="lname" /> </body&a
input:-webkit-autofill 谷歌浏览器 修改input输入框的颜色
07-03 1万+
chrome的input去黄色背景方法： chrome默认的黄色背景色，还有选中时周围会有很粗的边框。 很粗的边框让它的黄色背景给挡住啦。这个我gg了一下，然后看老外的写法搞定啦。 去掉这个黄色背景，给input添加autocomplete=‘off’也就是把他的自动完成关闭了。 去掉很粗的边框，给input添加outline：none;
chrome浏览器自动填充背景色-webkit-autofill
CamilleZJ的博客
10-10 2344
chrome浏览器自动填充样式
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
01-19
第二张图，就是表单自动填充后，chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { backgrou
chrome表单自动填充导致input文本框背景变成偏黄色问题解决
09-25
总之，解决 Chrome 表单自动填充导致的背景色问题通常需要结合 CSS 样式和 JavaScript 技术，具体方法应根据项目需求和浏览器兼容性进行选择。保持对浏览器更新的敏感，并随时调整代码以适应新特性或行为的变化，是...
Input框自动填充背景色
05-30
如果你想要实现input框的自动填充背景色效果，可以使用CSS中的:-webkit-autofill伪类。这个伪类是Webkit内核浏览器（如Chrome、Safari）所支持的，可以针对自动填充的input框进行样式设置。例如，将自动填充的背景色...
【Bug小记】input:-webkit-autofill:输入框自动填充背景问题
sunshine641的博客
09-23 2498
问题是这样的： 本来的登录输入框是这种设置好的半透明样式 但是 当选中 或者切换内容后就会自动填充白色的背景框，如下图 右键检查 尝试修改了好多样式，最后找到了input:-webkit-autofill 百度 发现大家都有发现这种情况，以下是我的总结： 一、 设置box-shadow 用阴影覆盖 input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px rgba(67,118,144,0.5)...
input:-webkit-autofill:输入框自动填充背景问题
weixin_53577099的博客
02-26 405
但这种方式并不适合设置透明背景， 如下图 ，透明阴影加上了，但自动填充的白色还在，适合底色是白色的输入框。第二种： 延长自动填充背景色的时间，就是让颜色填充在“一万年”以后实现， 这样短时间就看不到啦。问题：如图，如果input快速选择之前记录的账号密码会出现，不一样的背景色。
关于input:-webkit-autofill样式问题
weixin_30297281的博客
02-21 628
　　最近在整理项目的时候，遇到了一个chrome浏览器自动填充的样式问题， 用户名跟密码的input都设置为透明颜色，但是会变成黄色，打开chrome调试工具，发现有个input:-webkit-autofill的 background-color:rgb(250, 255, 189)!important;这个样式，网上查询得三种方案，一种是把input自动输入关闭autocomplete="...
修改chrome浏览器input:-webkit-autofill默认填充背景色和字体颜色
lz的博客
04-09 659
黄色背景的解决方法 input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset; background-color:rgba(23,144,255,0) } input内...
input:-webkit-autofill使输入框变成黄色
weixin_30740295的博客
05-25 174
解决办法： 把以下代码复制粘贴在css文件的前部，其中的具体设置项可改。 /* Change autocomplete styles in WebKit */input:-webkit-autofill,input:-webkit-autofill:hover, input:-webkit-autofill:focusinput:-webkit-autofill, textarea:...
chrome浏览器表单自动填充，样式改变---webkit-autofill
长歌的博客
01-15 2371
chrome浏览器使用表单自动填充功能后，背景颜色会变为黄色，经查看是-webkit-autofill私有属性的锅。 -webkit-autofill内容： input:-webkit-autofill,  textarea:-webkit-autofill,  select:-webkit-autofill { background-color: r
chrome浏览器自动填充时背景色改变（-webkit-autofill）
霜叶的博客
12-06 2643
input框自动填充时背景色处理
chrome浏览器表单自动填充默认样式-autofill设置
wdm891026的博客
03-24 1497
1. 错误显示状态如下：因为Input输入框并没有使用【autocomplete="off"】关闭浏览器自带填充表单功能，于是出现自动填充时样式就变成这样了~ 再来定位到输入框的样式，发现自动填充样式如图2 2. 解决第一步：修改样式如下，通过纯色的阴影覆盖底色。 虽然选择完成后，显示正常了；但是，鼠标点击选中状态依然还是有问题，如图3 input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
说说你对:-webkit-autofill的理解
最新发布
王铁柱666的博客
03-27 289
-webkit-autofill是CSS中的一个伪类选择器，它用于选择并修改Chrome浏览器（及其他基于WebKit的浏览器）中自动填充表单元素的样式。当用户之前在某个表单输入过数据，并且浏览器启用了自动填充功能时，该选择器就会生效。这通常发生在如用户名、密码或地址等输入框。综上所述，:-webkit-autofill是一个强大的工具，允许前端开发者在保持用户体验的同时，更好地控制WebKit浏览器中自动填充表单元素的样式。
input:-webkit-autofill 导致chrome的输入框背景颜色变成黄色
cherry_zhang18的博客
11-18 1136
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{ -webkit-box-shadow: 0 0 0 1000px #fff inset !important; } chorme背景色改为白色，透明色暂时没有办法解决
user agent stylesheet 设置的这个 css 样式，没有办法覆盖吗 input:-internal-autofill-selected 它加了！!important
12-13
在CSS中，`user agent stylesheet`是浏览器默认的样式表，通常优先级较低，可以通过自定义的CSS样式来覆盖。然而，有些浏览器内置的样式可能具有较高的优先级，导致自定义样式无法覆盖。 对于`input:-internal-autofill-selected`这样的选择器，即使使用了`!important`也无法覆盖，可能是因为浏览器的默认样式具有更高的优先级。以下是一些解决方法： 1. **使用更高优先级的选择器**： 使用更具体的选择器来覆盖浏览器默认样式。例如： ```css input:-internal-autofill-selected { background-color: #fff !important; /* 其他样式 */ } ``` 2. **使用`autofill`伪类**： 浏览器在自动填充时会添加`autofill`伪类，可以尝试覆盖这个伪类的样式： ```css input:-internal-autofill-selected:autofill { background-color: #fff !important; /* 其他样式 */ } ``` 3. **使用JavaScript动态修改样式**： 通过JavaScript在页面加载后动态修改样式： ```javascript document.addEventListener("DOMContentLoaded", function() { var inputs = document.querySelectorAll("input:-internal-autofill-selected"); inputs.forEach(function(input) { input.style.backgroundColor = "#fff"; // 其他样式 }); }); ``` 4. **使用`-webkit-autofill`伪类**： 一些浏览器使用`-webkit-autofill`伪类，可以尝试覆盖这个伪类的样式： ```css input:-internal-autofill-selected:-webkit-autofill { background-color: #fff !important; /* 其他样式 */ } ``` 通过这些方法，可以尝试覆盖浏览器的默认样式。如果仍然无法覆盖，可能需要进一步检查浏览器的具体实现和优先级规则。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值