Basic exampleSection

by Prajeesh_PR

HTML

<br>
<br>
<div class="form-group">
  <input type="text" id="name" class="form-control" placeholder=" " >
  <label class="form-control-placeholder" for="name">Name</label>
</div>

CSS

.form-group {
  position: relative;
  margin-bottom: 1.5rem;
}

input + .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
  margin-left: -25%;
  margin-top: -4%;
}

input:placeholder-shown + .form-control-placeholder {
  margin-top: 0%;
}

.form-control:focus + .form-control-placeholder {
  position: absolute;
  transition: all 200ms;
  margin-top: -4%;
}