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

妖狐艹你老母 2023-09-28 09:10 106阅读 0赞

#### 文章目录 ####

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

--------------------

## 胡言乱语 ##

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

--------------------

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

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

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

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

但是！往往这个是无法直接生效的，可以参考这篇博客[《autocomplete=“off” 不生效的解决方法》][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浏览器已有密码自动填充时出现的背景色去除办法》][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，如下图，大家也可以检查一下自己的。  
![在这里插入图片描述][e09a3c2c48fc4956b3dc5fa08e31cf4e.png]  
所以！ 我做出了自己的尝试：将 input 修改为 /deep/ .el-input\_\_inner  
![在这里插入图片描述][0634e704c1ca41c4bc1f63ec3f990aa4.png]  
代码如下：

/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样式不生效问题》][ElementUI_el-input_inner]。  
省流：.el-input\_inner 前面加上 >>> 或 /deep/ 就可以了。

成功消除了背景阴影，但是！ 另一个问题出现了：当失去焦点时输入框中的内容也看不见了，只有获取焦点时可以看见，于是我检查了一下：  
![在这里插入图片描述][5947276533094368bfd20a9ca7f4ac6c.png]  
所以我再次修改了代码：删除了 -webkit-text-fill-color: \#fff !important;  
![在这里插入图片描述][7b812890b9b8457da338451b55af3ccf.png]  
代码如下：

成功！

[autocomplete_off_]: https://blog.csdn.net/MrLiber/article/details/83214232?spm=1001.2014.3001.5506
[Chrome]: https://blog.csdn.net/weixin_43294092/article/details/107138663
[e09a3c2c48fc4956b3dc5fa08e31cf4e.png]: https://img-blog.csdnimg.cn/e09a3c2c48fc4956b3dc5fa08e31cf4e.png
[0634e704c1ca41c4bc1f63ec3f990aa4.png]: https://img-blog.csdnimg.cn/0634e704c1ca41c4bc1f63ec3f990aa4.png
[ElementUI_el-input_inner]: https://blog.csdn.net/weixin_42231601/article/details/120924764
[5947276533094368bfd20a9ca7f4ac6c.png]: https://img-blog.csdnimg.cn/5947276533094368bfd20a9ca7f4ac6c.png
[7b812890b9b8457da338451b55af3ccf.png]: https://img-blog.csdnimg.cn/7b812890b9b8457da338451b55af3ccf.png