html登录页面-账号密码框填写

 

效果如下:

 

<form id="formLogin">                             
<span class="txt user">
       <input value="" autocomplete="off" type="text" name="Mobile" placeholder="请输入手机号">
</span>
<span class="txt password"> <input value="" autocomplete="off" type="text" name="Password" placeholder="请输入手机号"> </span> </form>

 

css placeholder灰色效果

::-webkit-input-placeholder { /* WebKit browsers */
    color:    #999;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color:    #999;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
    color:    #999;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
    color:    #999;
}

输入框代码(思路:1,统一设置输入框大小样式 2,图片当做外层span的背景色 3,span内部嵌套一个input  4,input高度小于外层span)

.login-from-content .txt {
    padding-left:50px;
    margin-top:30px;
    width: 250px;
    height:38px;      
}

.login-from-content span {
    display: block;
}

.login-from-content .user 
{
    background: url(/images/login/login-account.png) no-repeat;
    height:38px;
    background-size:300px 38px; 
}

.login-from-content .password 
{
    background: url(/images/login/login-pwd.png) no-repeat;
    height:38px;
    background-size:300px 38px; 
}

.txt input {   
    background: none;
    width: 250px;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    border:none;
    outline: rgb(109, 109, 109) none 0px;
}