首页 > Web开发 > 详细

常见文本框提示css技巧

时间:2014-02-09 20:07:09      阅读:429      评论:0      收藏:0      [点我收藏+]

很多时候会碰到那个的表单

bubuko.com,布布扣

一般我们做文字提醒功能时会在value处直接写上,现在总结一个比较好的方法直接上代码:

html:

bubuko.com,布布扣
<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>
bubuko.com,布布扣

CSS

bubuko.com,布布扣
.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;
}
bubuko.com,布布扣

技巧方面用span来模拟文字提示,这样的话既可以在支持placeholder的浏览器下直接用,也可以在不支持placehloder的浏览器下用Js模拟

常见文本框提示css技巧

原文:http://www.cnblogs.com/leejersey/p/3541709.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!