点击输入框，标题上移

佚名 6年前 (2019-04-25) 随笔 623人围观抢沙发百度已收录

效果

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

.myAccount-title {
    margin: 35px 4px 20px;
}

.row > div {
    padding: 0 10px;
}

.navbar-collapse {
    padding: 0 4px;
}

.nav-tabs {
    border-bottom: 1px solid #DCDCDC;
}

.nav-tabs>li {
    margin-bottom: 0;
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    font-weight: 700;
    border: none;
    border-bottom: 2px solid #4594EF;
    color: #333;
}

.nav-tabs>li>a:hover,
.nav-tabs>li>a:focus,
.nav-tabs>li>a {
    border: none;
    font-weight: 500;
    color: #333;
}

div.details {
    display: flex;
    flex-wrap: wrap;
}

div.details .item {
    position: relative;
    font-size: 14px;
}

div.details .item label {
    position: absolute;
    top: 11px;
    left: 26px;
    color: #333;
    opacity: 0.7;
}

div.details .item input {
    margin-bottom: 20px;
    padding: 0 15px;
    border: 1px solid #979797;
    border-radius: 4px;
    height: 42px;
    width: 100%;
}

<!DOCTYPE html>
<html lang="zh-CN">

    <head>
        <!--告诉浏览器准备接受一个 HTML 文档-->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <!--默认编码UTF-8-->
        <meta charset="UTF-8">
        <!--默认采用webkit模式-->
        <meta name="renderer" content="webkit" />
        <!--IE=edge告诉IE使用最新的引擎渲染网页，chrome=1则可以激活Chrome Frame-->
        <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
        <!--(设置确保适当的绘制和触屏缩放)-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
        <meta name="apple-mobile-web-app-capable" content="yes">
        <!--控制状态栏显示样式-->
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--手机号码不被显示为拨号链接-->
        <meta name="format-detection" content="telephone=no" />
        <!--Email不被显示为发送Email链接-->
        <meta name="format-detection" content="email=no">
        <!--关键字-->
        <meta name="keywords" content="" />
        <!--描述信息-->
        <meta name="description" content="" />
        <!--作者-->
        <meta name="author" content="lgsp_Harold-Hua">
        <title>My Account</title>
        <!--重置部分默认样式-->
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <!--bootstrap框架样式-->
        <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
        <!--动画样式-->
        <link rel="stylesheet" type="text/css" href="css/animate.css" />
        <!--公共样式-->
        <link rel="stylesheet" type="text/css" href="css/global.css" />
        <!--私有样式-->
        <link rel="stylesheet" type="text/css" href="css/myAccount.css" />
        <!--公共js-->
        <script src="js/jquery-3.3.1.min.js"></script>
        <script src="js/bootstrap.min.js"></script>

    </head>

    <body>
        

        <div>
            <section>
                <div class="layout">
                    <div class="container-fluid section-1">
                                            

                        <div class="row">
                            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                                <!-- Tab panes -->
                                <div class="tab-content">
                                    <div role="tabpanel" class="tab-pane fade in active" id="account">
                                        <form action="" method="post">
                                            <div class="container-fluid">
                                                <div class="row">
                                                    <div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                        <p class="p-title_16 mt26 mb30">User Infomation</p>

                                                        <div class="details row">
                                                            <div class="item col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                                <label for="companyName">Company Name</label>
                                                                <input id="companyName" type="text">
                                                            </div>
                                                            <div class="item col-xs-12 col-sm-12 col-md-6 col-lg-6 text-right">
                                                                <label for="contactName">Contact Name</label>
                                                                <input id="contactName" type="text">
                                                            </div>
                                                            <div class="item col-xs-12 col-sm-12 col-md-6 col-lg-6">
                                                                <label for="phoneNumber">Phone Number:</label>
                                                                <input id="phoneNumber" type="tel">
                                                            </div>
                                                            <div class="item col-xs-12 col-sm-12 col-md-6 col-lg-6 text-right">
                                                                <label for="email">Email:</label>
                                                                <input id="email" type="email">
                                                            </div>
                                                            <div class="item col-xs-12 col-sm-12 col-md-7 col-lg-8">
                                                                <label for="resellerNumber">Reseller Number:</label>
                                                                <input id="resellerNumber" type="text">
                                                            </div>
                                                            <div class="item col-xs-12 col-sm-12 col-md-5 col-lg-4 text-right">
                                                                <label for="state">State:</label>
                                                                <input id="state" type="text">
                                                            </div>


                                                        </div>

                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                    <div role="tabpanel" class="tab-pane fade" id="order">
                                        <div class="container-fluid">
                                            <div class="row">
                                                2
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>

        

        <script>
            //输入框获得焦点时
            $("input").focus(function(event) {
                //label动态上升，升至顶部
                $(this).siblings("label").stop().animate({
                    "top": "0px","font-size": "12px"
                }, 500);
            });
            //输入框失去焦点时
//            $("input").blur(function(event) {
//                //label动态下降，恢复原位
//                $(this).siblings("label").stop().animate({
//                    "bottom": "0px","font-size": "16px"
//                }, 500);
//            });
        </script>
    </body>

</html>