NiceSnippets.com
New Stylish Textbox on Focus Label Effect Usign css
We are provide you new stylish textbox on focus label effect usign css. when you click on textbox at that time textbox label is move on cross. this label cross effect create usign pure css. this is good looking textbox hove label effect. this snippet support all the browser.
We allows to free snippets of float label css , you can download full code of floating label bootstrap layout. Here in this post i will give you example of move placeholder text on focus snippet and you will get simple code of html, css and jquery. In input with label effects snippet i give you three tab with html, css and js, you can easily get code of input with label effects layout.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="main-section">
<div class="form">
<input type="text" name="name" class="input-text" autocomplete="off">
<label class="label">Name</label>
</div>
<div class="form">
<input type="password" name="name" class="input-text" autocomplete="off">
<label class="label">Password</label>
</div>
</div>
</body>
</html>
body{
padding-top: 50px;
background-color:#77B892;
font-family: 'Raleway', sans-serif;
text-align: center;
}
.form{
position:relative;
display: inline-block;
}
.label{
background-color: #327D6A;
color:#fff;
padding:10px;
position: absolute;
top:0px;
left:0px;
transition: 0.5s;
}
.input-text{
padding:10px 10px 10px 35px;
font-size:15px;
border:none;
margin:0px 50px 30px 0px;
}
.input-text:focus + .label{
-ms-transform: rotate(-55deg);
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
transform: rotate(-55deg);
margin:-15px 0px 0px -29px;
}
.open + .label{
transform: rotate(-55deg);
margin:-15px 0px 0px -29px;
}
$(document).ready(function(){
$(".input-text").focusout(function(){
if($(this).val() !== "") {
$(this).addClass("open");
}
});
});
