点击输入框，标题上移

效果

.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>

转载于:https://www.cnblogs.com/Harold-Hua/p/10769327.html

点击输入框，标题上移相关推荐

CSS 仿谷歌input输入框，失焦时标题在输入框中，聚焦标题上移
问题由于中英文国际化问题,导致表单中input输入框前的标题长度不一. 表单input布局一般有两种方式,一种是左右结构,一种是上下结构. 上下结构能够很好地解决标题国际化切换导致的长短不一的问题, ...
从细节入手：点击输入框，提示文字瞬间变身小精灵
前言不知道大家是否曾经在填写表单时,被那些不起眼的提示文字所吸引,并且感受到了一种愉悦的交互体验?这种 "点击输入框提示文字上移且缩小" 的设计,正是为了让用户在使用电子设备时, ...
datagridview 点击列标题排序
开发winform中,平时经常用到数据列表,我们大多选用datagridview,但是此控件本身没有排序的功能.参阅网上资料.留下标记,以后备用. datagridview的数据显示一般是通过数据绑定 ...
解决iOS机型点击输入框不能聚焦的问题
解决iOS机型点击输入框不能聚焦的问题参考文章: (1)解决iOS机型点击输入框不能聚焦的问题 (2)https://www.cnblogs.com/blackbentel/p/11138017.h ...
按照标题排序mysql_Oracle EBS Form中实现点击列标题进行排序
在做EBS表单开发时,虽然使用folder功能提供了排序功能,对多行数据块可以对前三列进行指定排序,也可以单击前三列的列标题进行排 27.1 问题描述在做EBS表单开发时,虽然使用folder功能提 ...
移动端点击输入框，弹出键盘，底部被顶起问题（vue）
这个问题相信做移动端开发的童鞋会有深刻体会,以前用jq开发时就很头疼这个问题,每次底部footer部分需要用position:fixed,如果页面内容不是很长,没有超出屏幕范围,那就还好,没有问题:一 ...
H5页面苹果手机点击输入框输入内容时页面自动放大
问题:H5页面苹果手机点击输入框输入内容时,页面会自动放大,导致用户体验不好解决:<meta name="viewport" content="width=dev ...
android仿微信、QQ等聊天界面，实现点击输入框弹出软键盘、点击其他区域收起软键盘，默认滑动至最低端
如图所示,点击输入框及选择图片和发送按钮时软键盘显示且不消失,点击其他区域,则隐藏软键盘. 主要代码如下: override fun dispatchTouchEvent(ev: MotionEven ...
php liger 表格排序,LigerUI之grid表格点击表头标题排序实现
LigerUI之grid表格点击表头标题排序实现: 通过ajax方式加载数据之后,点击表头排序两种方式实现. 第一种: grid.set({ dataAction: 'local', url: '', ...
手机界面显示正常，点击输入框就放大，怎么破？看这里！
2019独角兽企业重金招聘Python工程师标准>>> 这是一个很神奇的现象,近期弄一个移动端活动页面,需要记录用户手机号获取验证码,一共就两个输入框,一个提交按钮,这个页面一开始为 ...

点击输入框，标题上移

点击输入框，标题上移相关推荐

最新文章

热门文章