Floating label (placeholder) on input focus

floating-label-placeholder-on-input-focus.md

Floating label (placeholder) on input focus

Working fiddle

Sample code:

<style>
.wrapper { position: relative; }

.control:focus ~ .floating-label,
.control:not(:focus):valid ~ .floating-label{
  top: 6px;
  left: 5px;
  font-size: 11px;
  opacity: 0.6;
}

.control {
  font-size: 14px;
  width: 200px;
  height: 45px;
}

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 14px;
  transition: 0.3s ease all;
}
</style>

<div class="wrapper">
  <input type="text" class="control" required/>
  <span class="floating-label">First Name</span>
</div>
<div class="wrapper">
  <input type="text" class="control" required/>
  <span class="floating-label">Last Name</span>
</div>