常見文本框提示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模擬