<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row" style="width:100%"> <h2>form for onclick INPUT LABEL POSITION CHANGE</h2> <div class="col-md-4 col-md-offset-4 mt-50"> <form> <div class="form-group"> <input required='' type='text'> <label alt='Email' placeholder='Type your Email'></label> </div> </form> </div> </div> </div>

input[type="text"][required]:focus,input[type="email"][required]:focus,textarea[required]:focus { border-color: #00bafa; } input[type="text"][required]:focus + label[placeholder]:before,input[type="email"][required]:focus + label[placeholder]:before, textarea[required]:focus + label[placeholder]:before { color: #00bafa; } input[type="text"][required]:focus + label[placeholder]:before, input[type="text"][required]:valid + label[placeholder]:before, input[type="email"][required]:focus + label[placeholder]:before, input[type="email"][required]:valid + label[placeholder]:before, textarea[required]:focus + label[placeholder]:before, textarea[required]:valid + label[placeholder]:before { transition-duration: .2s; transform: translate(0, -1.5em) scale(0.9, 0.9);padding:0px 10px 0px 10px;background: #fff; } input[type="text"][required]:invalid + label[placeholder][alt]:before, textarea[required]:invalid + label[placeholder][alt]:before, input[type="email"][required]:invalid + label[placeholder][alt]:before { content: attr(alt); } input[type="text"][required] + label[placeholder]:before, input[type="email"][required] + label[placeholder]:before, textarea[required] + label[placeholder]:before { content: attr(placeholder); display: inline-block; margin: 0 calc(1em + 2px); padding: 0 2px; color: #898989; white-space: nowrap; transition: 0.3s ease-in-out; background-image: linear-gradient(to bottom, #fff, #fff); background-size: 100% 5px; background-repeat: no-repeat; background-position: center; } .form-group{position: relative;} /*====*/ input[type="text"][required] + label[placeholder], input[type="email"][required] + label[placeholder], textarea[required] + label[placeholder] { display: block; pointer-events: none; /* line-height: 1em; */ /* margin-top: calc(-3em - 2px); */ /* margin-bottom: calc((3em - 1em) + 2px); */ position: absolute; top: 0px; } .mt-50{margin-top:50px;} h2{text-align:center;text-transform:uppercase;}