input.png

input-focus.png

表单样式

<style>
        * {
            margin:0;
            padding:0;
        }
        body {
            font-size:14px;
            font-family:"微软雅黑";
            color:#333;
        }
        .wrap {
            width:640px;
            height:320px;
            margin:50px auto;
        }
        .wrap .wrap_Iten {
            position:relative;
            margin:20px auto;
        }
        .item_tip {
            background-color: #fff;
            color: #999;
            font-size: 12px;
            left: 12px;
            padding: 0 3px;
            position: relative;
            top: 25px;
            transition: all .2s linear 0s;
            width: 4%;
        }
        .form_input {
            border:1px solid #dcdcdc;
            border-radius:5px;
            font-size:12px;
            padding:9px 10px;
            transition:border-color .15s ease-in-out 0s;
            width:278px;
            outline:none;
        }
        .item_tip_focus {
            color:#5188a6;
            font-size:12px;
            top:8px;
        }
        .form_input-focus {
            border-color:#5188a6;
            outline:0 auto;
        }

</style>
<div style="margin-top: 30px;"></div>
    <div class="wrap_input">
        <div class="wrap_Iten">
            <div class="item_tip">用户名/邮箱</div>
            <input type="text" tabindex="1" value="" name="username" class="form_input">
    </div>
</div>
<script>
        function focusInputLoginBox(obj) {
            obj.addClass("form_input-focus");
            obj.prev(".item_tip").addClass("item_tip_focus")
        }
        
        function blurInputLoginBox(obj) {
            var v = obj.val();
            if (v == "") {
                obj.removeClass("form_input-focus");
                obj.prev(".item_tip").removeClass("item_tip_focus")
            } else {
                obj.addClass("form_input-focus");
                obj.prev(".item_tip").addClass("item_tip_focus")
            }
        }
        $(document).ready(function() {
            $("input").blur(function() {
                blurInputLoginBox($(this))
            })
            $("input").focus(function() {
                focusInputLoginBox($(this))
            })
        })
    </script>
/*自用*/