登录界面中的textbox提示字段的实现

最新推荐文章于 2023-11-02 17:27:02 发布

Wfishes

最新推荐文章于 2023-11-02 17:27:02 发布

阅读量1k

点赞数

分类专栏： javascript 文章标签： javascript textbox jquery login

本文链接：https://blog.csdn.net/Wfishes/article/details/42879979

版权

本文介绍了如何实现登录界面中textbox的提示字段效果，包括HTML5的placeholder属性以及使用jQuery的两种不同实现方法，展示了相关代码示例。

摘要由CSDN通过智能技术生成

RT，可能标题描述得不是很清楚，下图就是要实现的效果：

html与css部分都比较好实现，代码如下：

        <div class="login_txtbox">
            <label class="lab_input">用户名/邮箱/手机号</label>
            <img src="image/icon/login_user.png"/>
            <input type="text"/>
        </div>
        <div class="login_txtbox">
            <label class="lab_input">密码</label>
            <img src="image/icon/login_passwd.png"/>
            <input type="password"/>
        </div>

.login_main .login_txtbox {
    width: 458px;
    height: 48px;
    border: 1px solid #ccc;
    margin-top: 10px;
    background-color: #fff;
    position: relative;
}
.login_main .login_txtbox .lab_input {
    display: