输入框悬浮标签
** 大家可自行改改
gif5新文件.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>输入框悬浮标签</title>
<style>
#form{
position: absolute;
top:50%;
left:50%;
width: 500px;
height:200px;
padding:50px;
background: #f5f5f5;
transform: translate(-50%,-50%);
}
.input_item{
position: relative;
width: 500px;
height:60px;
padding: 20px 0;
}
.input_item input{
width: 100%;
height:60px;
padding:20px 0 0 10px;
font-size: 16px;
border:0;
box-sizing: border-box;
border-bottom:1px solid #999;
outline: none;
transition: all .5s;
}
.input_item input:focus{
border-color: royalblue;
transition: all .3s;
}
.input_item label{
position: absolute;
top:50%;
left: 20px;
transform: translateY(-50%);
transition: all .3s;
font-size:15px;
}
.focus label{
top:25px;
left:10px;
font-size: 14px;
transition: all 0.4s;
transform:scale(0.9);
}
.cancelBlurs label {
position: absolute;
top:50%;
left: 20px;
font-size:15px;
transform: translateY(-50%);
transition: all .3s;
}
.blur label {
font-size: 15px;
top:25px;
left:10px;
transition: all .3s;
}
</style>
</head>
<body>
<form action="" id="form">
<div class="input_item">
<label for="userName">UserName</label>
<input type="text" id="userName" onclick="Focus(this)" onblur="Blur(this)">
</div>
<div class="input_item">
<label for="passWord">Password</label>
<input type="password" id="passWord" onclick="Focus(this)" onblur="Blur(this)">
</div>
</form>
</body>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
function Focus(el) {
$(el).parent().addClass('focus');
}
function Blur(el) {
var content = $(el).val();
if(content){
$(el).parent().addClass('blur');
}else{
$(el).parent().addClass('cancelBlurs');
}
}
</script>
</html>
