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

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

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;
}

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

相关推荐
小宇的天下1 分钟前
Calibre 3Dstack--每日一个命令day 6 [process和export layout](3-6)
java·前端·数据库
冴羽14 分钟前
2025 年最火的前端项目出炉,No.1 易主!
前端·javascript·node.js
wordbaby15 分钟前
Flexbox 布局中的滚动失效问题:为什么需要 `min-h-0`?
前端·css
demo007x21 分钟前
在国内也能使用 Claude cli给自己提效,附实操方法
前端·后端·程序员
jayaccc30 分钟前
Webpack配置详解与实战指南
前端·webpack·node.js
南囝coding30 分钟前
发现一个宝藏图片对比工具!速度比 ImageMagick 快 6 倍,还是开源的
前端
前端小黑屋38 分钟前
查看 Base64 编码的字体包对应的字符集
前端·css·字体
每天吃饭的羊1 小时前
媒体查询
开发语言·前端·javascript
XiaoYu20021 小时前
第8章 Three.js入门
前端·javascript·three.js
这个一个非常哈1 小时前
element之,自定义form的label
前端·javascript·vue.js