解决input设置密码属性后导致的input样式失效问题

在设计登录页面时，遇到一个之前没遇见的问题，这里记录一下。

问题描述：input设置密码属性后导致input设置的所有样式失效

具体如下

首先我对登录部分的盒子设置了如下属性

.login-box .login-form input {
    margin-bottom: 25px;
    width: 380px;
    height: 35px;
    outline: none;
    border: none;
    background-color: transparent;
    border-bottom: 2px solid #fff;
}

这样按道理可以实现下面的效果

 但是当我在密码输入框设置密码属性后（如下）

 

            

                

                    登录

                    开启你的时间管理之旅
                
                账号

                

                密码

                

                


                
没有账号？点击注册
            
        

我却遇到了这种情况

 大概原因就是浏览器有自动保存密码的功能。为了解决这个问题也很简单，我们只用在css最顶端加上这段代码

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {

    -webkit-transition: "color 9999s ease-out, background-color 9999s ease-out";

    -webkit-transition-delay: 9999s;

}

这样即使自动保存密码也不影响我们的样式（下面就显示了我之前设置的密码）

 希望可以帮到大家~