禁止浏览器自动填充密码功能,设置自动填充背景色。

禁止浏览器自动填充密码功能,设置自动填充背景色

1、禁止浏览器自动填充密码功能

text设置autocomplete="off"
password设置 autocomplete="new-password"

两个一起设置,就不会自动填充了。

javascript 复制代码
<el-input
   ref="username"
   class="my-input"
   v-model="loginForm.username"
   placeholder="账号/手机号"
   name="username"
   type="text"
   tabindex="1"
   autocomplete="off"
 />
 <el-input
   class="my-input"
   ref="password"
   v-model="loginForm.password"
   :type="passwordType"
   placeholder="密码"
   name="password"
   tabindex="2"
   autocomplete="new-password"
   @keyup.enter.native="handleLogin"
 />

2、设置自动填充背景色(阴影效果)

自动填充后,阴影颜色变为黑色。 需要设置为0,不显示阴影。

css 复制代码
.my-input .el-input__inner:-webkit-autofill,
.my-input .el-input__inner:-webkit-autofill:hover,
.my-input .el-input__inner:-webkit-autofill:focus,
.my-input .el-input__inner:-webkit-autofill:active {
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: 0 0 0 0px inset !important;
}

设置完后,自动填充没有阴影了。

相关推荐
提子拌饭13321 小时前
个人月事记录表应用 - 鸿蒙PC Electron框架完整实现指南
前端·javascript·华为·electron·前端框架·开源·鸿蒙系统
YHL21 小时前
📚 JS执行机制(执行上下文 + 调用栈 + 编译流程)
前端·javascript
不简说21 小时前
这次真香!sv-print 可视化打印设计器更新:插件脚手架、Excel 导出、弹窗 API 三连发
前端·javascript·前端框架
无聊的老谢21 小时前
Web GIS 最佳实践:Vue 集成 Leaflet/OpenLayers 实现基站海量点位渲染
前端·javascript·vue.js
yingyima21 小时前
GCP Cloud Scheduler 核心语法与实战示例速查手册
前端
用户573501072520621 小时前
Elpis 项目阶段性总结 - 基于 vue3 完成领域模型架构建设
前端
假如让我当三天老蒯1 天前
为什么 setData 能获取到 prev 参数?(自学用)
前端·react.js
AskHarries1 天前
Workspace:文件系统、项目上下文和执行边界
java·服务器·前端
Aphasia3111 天前
从内存模型看深浅拷贝
前端·javascript·面试
IT策士1 天前
第45篇 k8s之实战:将 Web 应用迁移到 Kubernetes(下)
前端·容器·kubernetes