《已解决》el-input自动填充时输入内容存在阴影

文章目录 胡言乱语方法1：关闭自动填充功能方法2：修改输入内容的背景样式

---

---

胡言乱语

查了非常多的博客，大多用起来都是无效果，但可以看出网友们提供了两种思路：（1）直接关闭自动填充功能，但是这也太不方便了；（2）修改输入内容的背景样式，但这个说起来容易， *** 作起来有点困难，我作为前端小白，代码都是用到啥学啥，没有全面、基础的知识，非常困难。但是！功夫不负有心人，我终于瞎捣鼓出来了。

---

提示：以下是本篇文章正文内容，下面案例可供参考

方法1：关闭自动填充功能

在el-input标签处添加 autocomplete=“off”

<el-input
	id="userName"
	autocomplete="off"
	>

</el-input>

但是！往往这个是无法直接生效的，可以参考这篇博客《autocomplete=“off” 不生效的解决方法》。

省流：autocomplete=“off” 改为 autocomplete=“new-pwd” 就可以生效

<el-input
	id="userName"
	autocomplete="new-pwd" 
	>

</el-input>

方法2：修改输入内容的背景样式

直接上结果： 通过检查发现我输入的内容属于el-input_inner，于是修改el-input_inner样式

/deep/ .el-input__inner{
	background-color: rgba(255,255,255,0) !important;
}
/deep/ .el-input__inner:-webkit-autofill{
	transition: background-color 5000s ease-in-out 0s;
}
/deep/ .el-input__inner:-webkit-autofill:focus{
	-webkit-text-fill-color: #333 !important;
}

如下是我研究和解决的历程，如果你的问题没有得到解决，可以看看我的历程，说不定对你有帮助。

参考博客《Chrome浏览器已有密码自动填充时出现的背景色去除办法》。

省流：在style处加上如下代码就可以了

input{
    background-color: rgba(255,255,255,0) !important;
}
input:-webkit-autofill{
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
  }
input:-webkit-autofill:focus{
    -webkit-text-fill-color: #333 !important;
}

但是！我的vue没有起作用，由于我不了解原理（能用解决问题就行，原理懒得研究了），就猜测可能是因为我是用的是el-input，其中输入内容是属于el-input_inner，如下图，大家也可以检查一下自己的。

所以！ 我做出了自己的尝试：将 input 修改为 /deep/ .el-input__inner

代码如下：

/deep/ .el-input__inner{
	background-color: rgba(255,255,255,0) !important;
}
/deep/ .el-input__inner:-webkit-autofill{
	transition: background-color 5000s ease-in-out 0s;
	-webkit-text-fill-color: #fff !important;
}
/deep/ .el-input__inner:-webkit-autofill:focus{
	-webkit-text-fill-color: #333 !important;
}

这里解释一下，如果直接用el-input_inner可能是无效的，可以参考这篇博客《关于ElementUI中修改el-input__inner样式不生效问题》。
省流：.el-input_inner 前面加上 >>> 或 /deep/ 就可以了。

成功消除了背景阴影，但是！ 另一个问题出现了：当失去焦点时输入框中的内容也看不见了，只有获取焦点时可以看见，于是我检查了一下：

所以我再次修改了代码：删除了 -webkit-text-fill-color: #fff !important;

代码如下：

/deep/ .el-input__inner{
	background-color: rgba(255,255,255,0) !important;
}
/deep/ .el-input__inner:-webkit-autofill{
	transition: background-color 5000s ease-in-out 0s;
}
/deep/ .el-input__inner:-webkit-autofill:focus{
	-webkit-text-fill-color: #333 !important;
}

成功！