I am attempting to replicate the materialize style for input boxes where the label moves up and decreases in font size with animation when the text box is clicked.
Although I have managed to achieve this effect, there seems to be a slight issue. When clicking on the input box, not only does the label move up as intended, but there is also some noticeable fluctuation happening as if the form elements are shifting by 2px.
How can I fix this? Here is my current code:
$(document).ready(function(){
$("input").focus(function(){
$(this).parent().find("label").addClass('active_text_field');
});
$("input").focusout(function(){
if ($(this).val() == '') {
$(this).parent().find("label").removeClass('active_text_field');
};
});
}).contact_form{
position: absolute;
display: block;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 50%;
height:500px;
}
.form-item label{
display: block;
font-size: 18px;
font-family: roboto;
position: relative;
top: 30px;
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
}
.form-item input{
width:100%;
outline:none;
height:36px;
border:none;
border-bottom: solid black 1px;
}
.active_text_field{
transform: translateY(-30px);
-moz-transition: all ease-in-out 200ms;
-webkit-transition: all ease-in-out 200ms;
transition: all ease-in-out 200ms;
font-size: 16px !important;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="contact_form">
<form>
<div class="form-item">
<label for="firstName">
First Name
</label>
<input type="text" name="firstName" class="text-field">
</div>
<div class="form-item">
<label for="lastName">
Last Name
</label>
<input type="text" name="lastName" class="text-field">
</div>
<div class="form-item">
<label for="email">
Email
</label>
<input type="text" name="email" class="text-field">
</div>
<div class="form-item">
<label for="confirmEmail">
Confirm Email
</label>
<input type="text" name="confirmEmail" class="text-field">
</div>
</form>
</div>