带图标的input

WEB前端 waitig 667℃ 百度已收录 0评论

带图标的input


我写的这段代码是一个登陆页,响应式且垂直居中


html代码

    <div id="container">
        <div>
            <div class="text">
                <input class="loginInput" type="text" id="userName"/>
            </div>
            <div class="text">
                <input class="loginInput" type="text" id="userPwd"/>
            </div>
            <div class="remberPwd">
                <input type="checkbox" id="checkedPwd"/>
                <label for="checkedPwd">  记住密码</label>
            </div>
        </div>
    </div>

css代码

#container{
    width:100%;
}
#container>div{
    width: 40%;
    height: 200px;
    margin:auto;
    position: absolute;
    top:0;left:0;right: 0;bottom: 0;
}
.text{
    border:none;
    border-bottom:1px solid #ddd;
    width:100%;
    height:40px;
    background:url(../resource/account.png)no-repeat 0 center ;
}
.loginInput{
    outline: none;
    float:left;
    border:none;
    background:none;
    height:40px;
    line-height:30px;
    width:100%;
    text-indent:32px;
}
.remberPwd{
    width:100%;
    height:40px;
    line-height:40px;
}

本文由【waitig】发表在等英博客
本文固定链接:带图标的input
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)