点击输入框,标题上移
效果
.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>
$(function() {
$("form input").each(function() {
//alert(this.value);
values = this.value;
if(values == "") {
} else {
$(this).siblings("label").stop().animate({
"top": "0px",
"font-size": "12px"
}, 500);
}
})
}); //输入框获得焦点时 $("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>
略懂,略懂....