很多时候会碰到那个的表单
一般我们做文字提醒功能时会在value处直接写上,现在总结一个比较好的方法直接上代码:
html:
<dl class="login_from"> <dd class="login_input"> <span>微博/博客/邮箱/手机号</span> <input type="text"></dd> <dd class="login_input"> <span>请输入密码</span> <input type="password"></dd> <dd> <input type="button" value="登陆" class="login_btn"> <label for="c1" class="next_autologin"> <input type="checkbox" id="c1"> <span>下次自动登陆</span> </label> </dd> <dd> <a href="#" class="login_link">忘记密码</a> <a href="#" class="login_link">立即注册</a> </dd> </dl>
CSS
.login_cont dd { margin-bottom: 12px; } .login_input { width: 202px; height: 27px; border: #D0D0D0 solid 1px; position: relative; } .login_input span { padding: 0 5px; line-height: 27px; color: #A9A9A9; display: block; height: 27px; margin-bottom: -27px; } .login_input input { height: 27px; line-height: 27px\9; border: none; background: none; width: 192px; padding: 0 5px; position: relative; }
技巧方面用span来模拟文字提示,这样的话既可以在支持placeholder的浏览器下直接用,也可以在不支持placehloder的浏览器下用Js模拟