带图标的input

带图标的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;}