<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.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="row"> <h2>Material design input.</h2> <div class="mat-input"> <div class="mat-input-outer"> <input type="text" autocomplete="off"/> <label class="">Enter your Name</label> <div class="border"></div> </div> </div> </div> </div>

/*MATERIAL INPUT*/ h2{ font-family:calibri; color:purple; text-align:center; } .mat-input{ margin: 2% auto; width: 50%; } .mat-input-outer{ display: table; width: 100%; position: relative; } .mat-input-outer input{ height: 50px; border-radius: 0; border: none; width: 100%; padding: 0 15px; font-family: calibri; font-size: 20px; font-style: italic; } .mat-input-outer label{ font-family: calibri; font-size: 20px; left: 15px; position: absolute; top: 18px; font-style: italic; transition: .2s; color: #000; cursor: text; font-weight: normal; opacity: 0.4; filter: alpha(opacity=40); } .mat-input-outer .border{ height: 1px; background: #000; transition: .3s; -webkit-transition: .3s; -ms-transition: .3s; } .mat-input-outer .border::before{ content: " "; display: table; height: 3px; width: 0%; background: transparent; transition: .3s; -webkit-transition: .3s; -ms-transition: .3s; margin: 0 auto; } .mat-input-outer input:focus ~ .border{ background: transparent; } .mat-input-outer input:focus ~ .border::before{ width: 100%; background: purple; } .mat-input-outer input + label.active{ left: 5px; top: -25px; color: purple; opacity: 1; filter: alpha(opacity=100); }

$(function () { $('.mat-input-outer label').click(function () { $(this).prev('input').focus(); }); $('.mat-input-outer input').focusin(function () { $(this).next('label').addClass('active'); }); $('.mat-input-outer input').focusout(function () { if (!$(this).val()) { $(this).next('label').removeClass('active'); } else { $(this).next('label').addClass('active'); } }); });