谷歌浏览器记住密码——导致Input组件出现特殊样式的修改

冷不防 2022-10-08 14:29 417阅读 0赞

昨天写了一个登陆页面，一般登录页需要输入用户名、密码等内容，就是一个简单的表单提交。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]  
最终效果图如上所示：

红框中的部分有个浅蓝色的底，一开始我以为是其他同事写的`css`的影响，后面才发现是谷歌浏览器记住密码后，自动填充后出现的默认样式：

找到问题源头后，直接百度，找到解决办法如下：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill {   
        -webkit-text-fill-color: #ededed !important;  //这个地方的颜色是字体颜色，可以根据实际情况修改
        -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;  //设置input输入框的背景颜色为透明色
        background-color:transparent;  //设置input输入框的背景颜色为透明色
        background-image: none;  
        transition: background-color 50000s ease-in-out 0s;  
    }  
    input {   
        background-color:transparent;  //设置input输入框的背景颜色为透明色
    }

最终效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]

完成！！！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20221005/162f8ab7ac594a078dc1fd16e13e3b52.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20221005/c2140755c9f043fda879a0cd813216e0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20221005/2c4ca87d4a974a7898ffbf76e65a06d5.png