I make the following fields next to the form, when at focus the explanatory text rises above the field:

Desired result

.input_block { margin: 0 0 25px 0; width: 344px; height: 66px; position: relative; } .input_block input { display: block; padding: 0; width: 344px; height: 64px; border: none; border-bottom: 2px solid #000; background: none; font-family: "ProximaNovaBold"; font-size: 24px; color: #000; outline: none; } .input_block label { display: block; width: 344px; height: 64px; position: absolute; top: 0; left: 0; } .input_block label span { display: block; height: 24px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; font-family: "ProximaNovaBold"; font-size: 24px; line-height: 24px; color: #000; position: absolute; top: 21px; left: 0; } .input_block input:focus + label span { font-size: 14px; top: -10px; } 
 <form action="#" method="post"> <div class="input_block"> <input type="text" name="name" id="name_input"> <label for="name_input"> <span>Full Name:</span> </label> </div> <div class="input_block"> <input type="text" name="phone" id="phone_input"> <label for="phone_input"> <span>Phone Number:</span> </label> </div> </form>

How to make that, if there is text in the field, the explanatory text does not return to its original state, but remains above the field?

1 answer 1

Add a class to fields that have a value.

 $('input').change(function() { if ($(this).val()) $(this).addClass('has_value'); else $(this).removeClass('has_value'); }); 
 .input_block { margin: 0 0 25px 0; width: 344px; height: 66px; position: relative; } .input_block input { display: block; padding: 0; width: 344px; height: 64px; border: none; border-bottom: 2px solid #000; background: none; font-family: "ProximaNovaBold"; font-size: 24px; color: #000; outline: none; } .input_block label { display: block; width: 344px; height: 64px; position: absolute; top: 0; left: 0; } .input_block label span { display: block; height: 24px; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease; -ms-transition: all 0.3s ease; transition: all 0.3s ease; font-family: "ProximaNovaBold"; font-size: 24px; line-height: 24px; color: #000; position: absolute; top: 21px; left: 0; } .input_block input:focus+label span { font-size: 14px; top: -10px; } .has_value+label span { font-size: 14px; top: -10px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form action="#" method="post"> <div class="input_block"> <input type="text" name="name" id="name_input"> <label for="name_input"> <span>Full Name:</span> </label> </div> <div class="input_block"> <input type="text" name="phone" id="phone_input"> <label for="phone_input"> <span>Phone Number:</span> </label> </div> </form>

https://jsfiddle.net/TheDeadOne/nh13xf7o/1/