登录框用Google浏览器的记住密码时，输入框背景色会改变的解决办法

先知demons

于 2024-08-19 11:08:45 发布

阅读量281

点赞数 2

文章标签： javascript 前端 css3

本文链接：https://blog.csdn.net/wzy_PROTEIN/article/details/141320416

版权

一、问题描述:

在写好输入框背景色样式之后，正常输入账号密码时样式显示正常，但是使用了google浏览器记住的账号密码时，浏览器自动填充账户和密码后会自动添加背景色，如下图。

二、解决办法：

写入以下样式代码即可：

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; //设置input输入框的背景颜色为透明色
  background-color: transparent; //设置input输入框的背景颜色为透明色
  background-image: none;
  transition: background-color 50000s ease-in-out 0s;
}
input {
  background-color: transparent; //设置input输入框的背景颜色为透明色
}