<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="mat-div"> <label for="first-name" class="mat-label">First Name</label> <input type="text" class="mat-input" id="first-name"> </div> </div>

.mat-div { padding: 30px 0 0 0; position: relative; } .mat-div:after, .mat-div:before { content: ""; position: absolute; display: block; width: 100%; height: 2px; background-color: #e2e2e2; bottom: 0; left: 0; transition: all 0.5s; } .mat-div::after { background-color: #8E8DBE; transform: scaleX(0); } .mat-label { display: block; font-size: 16px; transform: translateY(25px); color: green; transition: all 0.5s; } .mat-input { position: relative; background: transparent; width: 100%; border: none; outline: none; padding: 8px 0; font-size: 16px; } .is-active::after { transform: scaleX(1); } .is-active .mat-label { color: #8E8DBE; } .is-completed .mat-label { font-size: 12px; transform: translateY(0); }

$(".mat-input").focus(function(){ $(this).parent().addClass("is-active is-completed"); }); $(".mat-input").focusout(function(){ if($(this).val() === "") $(this).parent().removeClass("is-completed"); $(this).parent().removeClass("is-active"); })