常见文本框提示css技巧

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

一般我们做文字提醒功能时会在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模拟

转载于:https://www.cnblogs.com/leejersey/p/3541709.html