This code is currently in use.
It seems to be working fine, but there's one issue that needs addressing: when moving from one input field to the next, the labels for each field are getting mixed up with their corresponding inputs. This problem will become apparent once you review my code.
<div class="row">
<div class="container">
<h2>Input with Label Effects</h2>
<div class="col-3 input-effect">
<input class="effect-16" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-17" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
<div class="col-3 input-effect">
<input class="effect-18" type="text" placeholder="">
<label>First Name</label>
<span class="focus-border"></span>
</div>
</div>
</div>
/*= Reset CSS
============= */
html, body {border: 0; margin: 0; padding: 0;}
body {font: 14px "Lato", Arial, sans-serif; min-width: 100%; min-height: 100%; color: #666;}
.container{margin: 0 auto; max-width: 1200px;}
*{margin: 0; padding: 0; box-sizing: border-box;}
.row{float: left; width: 100%; padding: 20px 0 50px;}
h2{text-align: center; color: #2079df; font-size: 28px; float: left; width: 100%; margin: 30px 0; position: relative; line-height: 58px; font-weight: 400;}
h2:before{content: ""; position: absolute; left: 50%; bottom: 0; width: 100px; height: 2px; background-color: #2079df; margin-left: -50px;}
/*= Reset CSS End
================= */
/*= Input focus effects CSS
=========================== */
:focus{outline: none;}
.col-3{float: left; width: 27.33%; margin: 40px 3%; position: relative;} /* necessary to give position: relative to parent. */
input[type="text"]{font: 15px/24px "Lato", Arial, sans-serif; color: #333; width: 100%; box-sizing: border-box; letter-spacing: 1px;}
.effect-16,
.effect-17,
.effect-18{border: 0; padding: 4px 0; border-bottom: 1px solid #ccc; background-color: transparent;}
.effect-16 ~ .focus-border{position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: #3399FF; transition: 0.4s;}
.effect-16:focus ~ .focus-border,
.has-content.effect-16 ~ .focus-border{width: 100%; transition: 0.4s;}
.effect-16 ~ label{position: absolute; left: 0; width: 100%; top: 9px; color: #aaa; transition: 0.3s; z-index: -1; letter-spacing: 0.5px;}
.effect-16:focus ~ label, .has-content.effect-16 ~ label{top: -16px; font-size: 12px; color: #3399FF; transition: 0.3s;}
// JavaScript for label effects only
$(window).load(function(){
$(".col-3 input").val("");
$(".input-effect input").focusout(function(){
if($(this).val() != ""){
$(this).addClass("has-content");
}else{
$(this).removeClass("has-content");
}
})
});
Fiddle link:- https://codepen.io/Balvant_Ahir/pen/wxZjxP