常见文本框提示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模拟