带图标的input

最新推荐文章于 2024-06-18 17:03:40 发布

javascript艺术

最新推荐文章于 2024-06-18 17:03:40 发布

阅读量900

点赞数 1

分类专栏： CSS3

本文链接：https://blog.csdn.net/zhangjing1019/article/details/78303093

版权

CSS3 专栏收录该内容

12 篇文章 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;
}