Skip to content

Instantly share code, notes, and snippets.

@luokebi

luokebi/float-title-input

Created April 16, 2014 02:31
Show Gist options
  • Save luokebi/10799628 to your computer and use it in GitHub Desktop.
Save luokebi/10799628 to your computer and use it in GitHub Desktop.
Download ZIP
float title input demo
Raw
float-title-input
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset=utf-8>
<title>niceInput</title>
<style>
body {
font-family: "ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;
}
.container{margin: 0 auto; width: 480px;}
.form-horizontal{
margin-top: 50px;
border: 1px solid #ccc;
border-radius: 3px;
}
.form-horizontal .form-title {
border-bottom: 1px solid #ccc;
padding: 0px 15px;
color: #333;
}
.form-horizontal .form-content {
padding: 15px;
}
.form-item {
width: 100%;
margin: 15px auto;
position: relative;
}
.form-input {
display: block;
border-radius: 10px;
width: 100%;
height: 46px;
font-size: 14px;
line-height: 1.428571429;
box-sizing:border-box;
vertical-align: middle;
padding: 9px 12px;
border: 1px solid #ccc;
-webkit-transition: border-color ease-in-out .15s;
transition: border-color ease-in-out .15s;
}
.form-input:focus {
border-color: #66afe9;
outline: 0;
}
.item-tip {
position: absolute;
color: #ccc;
top: 9px;
left: 12px;
transition: all linear .2s;
background-color: #fff;
padding: 0px 3px;
}
.item-tip-focus {
top: -8px;
font-size: 12px;
color: #66afe9;
}
</style>
</head>
<body>
<div class="container">
<div class="form-horizontal">
<div class="form-title">
<h1>Float Title Input</h1>
</div>
<div class="form-content">
<div class="form-item">
<div class="item-tip">姓名</div>
<input class="form-input" type="text" name="name">
</div>
<div class="form-item">
<div class="item-tip">年龄</div>
<input class="form-input" type="text" name="age">
</div>
<div class="form-item">
<div class="item-tip">性别</div>
<input class="form-input" type="text" name="sex">
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(".form-input").on("focus", function(e){
var $this = $(this);
var $tip = $this.prev();
$tip.addClass("item-tip-focus");
$tip.css("color","#66afe9");
});
$('.item-tip').on('click', function () {
$(this).next().trigger('focus');
});
$(".form-input").on("blur", function(e){
var $this = $(this);
var $tip = $this.prev();
if ($this.val().trim() === "") {
$tip.removeClass("item-tip-focus");
}
$tip.css("color","#ccc");
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment