浏览器输入框自动填充默认样式移除

浏览器输入框自动填充默认样式移除

问题现象以及探索过程

（在 uniapp 语法下）本文的写法在

• Edge 119.0.2151.58 (正式版本) (64 位) 下有效
• 其他浏览器我电脑上没装，就不去测试了

自动填充，试了网上的很多参考文章都无效

• 包括 autocomplete="off"

• 不要 placeholder，自己模拟并监听是否自动填充然后控制其显示隐藏

• uniapp中input框如何不让默认填充账号密码

有时间的朋友可以试试研究一下这些文章，大概率能解决问题：（感觉稍微有点复杂，我就没有去尝试）

• javascript - 检测浏览器自动填充

• vue自定义密码输入框解决浏览器自动填充密码的问题(最新方法)

• chrome输入框input黄色背景去除 及 autocomplete失效解决方法

  • 这个可能会不行，不是很推荐

尝试代码

input :-webkit-autofill,
input :-webkit-autofill:hover,
input :-webkit-autofill:focus,
input :-webkit-autofill:active {
  -webkit-text-fill-color: rgb(153, 153, 153) !important;
  background-color: white !important;
  transition: background-color 5000s ease-in-out 0s;
}

会有重叠问题……

有效关键代码（解决方案）

• -webkit-text-fill-color 里面自己改默认填充的文字颜色（代码里写的是 rgb(153, 153, 153) 灰色）
• -webkit-box-shadow 里面自己改默认填充的背景颜色（代码里写的是 white 白色）

/* 有效代码 */
input :-webkit-autofill,
input :-webkit-autofill:hover,
input :-webkit-autofill:focus,
input :-webkit-autofill:active {
  -webkit-text-fill-color: rgb(153, 153, 153) !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

/* 无效代码（在PC端可能又得是下面的代码生效了……） */
/*
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: rgb(153, 153, 153) !important;
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}
*/