前言

最近想做一个比较好看的登录界面，就将输入框的背景色什么的都改了一遍，测试时基本效果都达到预期，唯独自动填充账号密码时，自己设置的输入框样式不起作用了，样式又变回默认的自动填充色了，这让我很苦恼…

自动填充前的图

自动填充后的图

解决方法

我先是通过打开控制台查找控制自动填充背景色的样式：

找出了原来是input:-internal-autofill-selected将我设置的背景色覆盖了。

修改默认背景色为单一色彩时可采用以下方法：

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

处理后自动填充样式为相应颜色

上面的方法虽然能设置单一的背景色，但我想设置为透明，尝试了很多遍还是无法成功，只好换别的办法：

input:-internal-autofill-previewed,
input:-internal-autofill-selected {-webkit-text-fill-color: #FFFFFF !important;transition: background-color 5000s ease-in-out 0s !important;
}

处理后自动填充样式正常（透明）

input修改自动填充背景色(单一色以及透明)相关推荐

清除input自动填充背景色
HTML输入框input标签自动填充背景色可以通过CSS的autofill伪类修改取消,自动填充字体颜色则可以通过CSS的text-fill-color属性设置以谷歌浏览器chrome为例: inp ...
input文本框自动填充背景色黄色解决办法
文章目录 input文本框自动填充背景色黄色解决方式解决前后,截图对比: 解决方式兼容性说明 input文本框自动填充背景色黄色解决方式如何取消黄背景色?浏览器兼容处理? 解决前后,截图对比: ...
去掉chrome浏览器中input被自动填充后的背景色
chrome浏览器中,输入框如果被自动填充内容了,那么输入框也会被浏览器自动填充一个背景色,我电脑上填充的是蓝色,在网上有查到有填充黄色的,但不管是什么颜色的,实际表现是chrome给我们自动填充的i ...
chrome浏览器自动填充背景色-webkit-autofill
输入框在chrome浏览器下显示白色背景,主要针对type为password的input,即使添加了非白色背景,仍然没用,看控制面板会有自动填充:input:-webkit-autofill的 bac ...
修改自动填充的input背景色
input框颜色怎么改都不起作用,发现是用户代理样式表的东西自动填充了 input:-internal-autofill-selected {appearance: menulist-button;b ...
html 自动填充缓存,禁止input密码自动填充及浏览器缓存密码账号解决方案
禁止自动填充方案 readonly οnfοcus="this.removeAttribute('readonly')" 这方案亲测有效,简单直接,把上面代码直接复制放到input ...
input框自动填充内容背景颜色为黄色解决方法
input:-webkit-autofill { box-shadow: 0 0 0px 1000px white inset !important;} 或者关闭自动填充 <form actio ...
禁止input密码自动填充及浏览器记住密码完整解决方案
完整方案禁止缓存,禁止自动填充,不会触发浏览提示记住密码,其余与正常一致,该方案跨浏览器兼容且易结合任何框架及库使用. npm i nice-pass-word 具体使用参照文档既可以. 下面的内容 ...
input禁止自动填充
1.在form表单或者input中使用autocomplete="off" 2.不让页面读取缓存数据 <meta http-equiv= "Pragma&quo ...

input修改自动填充背景色(单一色以及透明)

前言

自动填充前的图

自动填充后的图

解决方法

我先是通过打开控制台查找控制自动填充背景色的样式：

修改默认背景色为单一色彩时可采用以下方法：

处理后自动填充样式为相应颜色

上面的方法虽然能设置单一的背景色，但我想设置为透明，尝试了很多遍还是无法成功，只好换别的办法：

处理后自动填充样式正常（透明）

input修改自动填充背景色(单一色以及透明)相关推荐

最新文章

热门文章