火狐浏览器input自动填入账号和密码后变成黄色

m0_53682699

于 2024-05-27 21:00:00 发布

阅读量735

点赞数 5

文章标签：前端

本文链接：https://blog.youkuaiyun.com/m0_53682699/article/details/139238107

版权

这个问题是由火狐浏览器的自动填充功能触发的。当浏览器检测到一个输入字段被自动填充后，它可能会用黄色高亮显示这些字段，以提醒用户这些信息是自动填充的。

解决方法：

1、在该input标签上，通过设置输入字段的 autocomplete 属性为 off

<el-input ref="username" :class="XXX" v-model="username" placeholder="请输入用户名" 
 autocomplete="off"/>

2、CSS加入以下代码样式，即可解决该问题：

input:-webkit-autofill { 
  background: #283443 !important;
  color: #000;
  -webkit-box-shadow: 0 0 0px 1000px #283443 inset !important;
  -webkit-text-fill-color:#fff; 
}