h5登录input框浏览器输入账号密码样式设置

最新推荐文章于 2024-06-26 15:51:34 发布

恍恍惚惚斯基

最新推荐文章于 2024-06-26 15:51:34 发布

阅读量2.4k

点赞数

分类专栏：前端文章标签： css html5

本文链接：https://blog.csdn.net/weixin_42432439/article/details/105043309

版权

前端专栏收录该内容

30 篇文章 0 订阅

订阅专栏

当使用浏览器记住的账号和密码登录时，输入框会默认变成白色背景和黑色字体，有时并不符合自己设计的界面的样式，比如暗黑模式，所以需要自己手动设置css。代码如下

input:-webkit-autofill , textarea:-webkit-autofill, select:-webkit-autofill{
    -webkit-text-fill-color: #ccc !important;
    -webkit-box-shadow: 0 0 0px 1000px transparent  inset !important;
    background-color:transparent;
    background-image: none;
    transition: background-color 50000s ease-in-out 0s;
}

输入框默认样式（记录一下，与本文内容无关）

.login-input{
    width:75%;
    height:40px;
    border:1px solid #5081fb;
    border-radius: 5px;
    padding:0 12px;
    background-color:transparent;
    color:#ccc;
    font-size:16px;
    outline:none;
    -webkit-transition: 0.5s;
    transition: 0.5s;
}
.login-input:focus{
    border:2px solid #3E73FB;
}