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; }