Move placeholder to Top inside the input on focus

Move placeholder to Top inside the input on focus

by sundaramkumar

HTML

<div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="ng-required">Your email address</span>
  </span>
</div>
<!-- <br/><br/> --> <!-- if you set position to absolute for the div tag, then you need to add these <BR> or need to put the
fields in seperate rows -->
<div>
  <span class='blocking-span'>
    <input type="text" class="inputText" required/>
    <span class="ng-required">Your Name</span>
  </span>
</div>

CSS

div {
  /* set the position to relative on the div the 
  floating-label will still re-position as if it were outside the
  blocking-span */
  position: relative; /*  make label relate to div. read the comment in html  */
  padding-top: 10px;  /*  make space for label      */
  height:30px;
}
.inputText {
  font-size: 14px;
  /* width: 200px; */
  height: 25px;
  /* padding-left:15px; */
}
.ng-required {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .ng-required,
input:not(:focus):valid ~ .ng-required {
  /* top: -6px; */
  top: 10px;
    font-size: 10px;
    left: 2px;
    color:#a2a0a0;
}