Floating Label Input

Input label floats above the field when focused or filled. Material Design pattern. The placeholder=" " trick enables the :not(:placeholder-shown) selector for detecting input content.

.float-group {
  position: relative;
  margin-top: 16px;
}
.float-group input {
  width: 100%;
  padding: 12px 0 8px;
  border: none;
  border-bottom: 2px solid #333;
  background: transparent;
  color: white;
  font-size: 16px;
  outline: none;
}
.float-group label {
  position: absolute;
  top: 12px;
  left: 0;
  color: #666;
  font-size: 16px;
  transition: all 0.2s;
  pointer-events: none;
}
.float-group input:focus ~ label,
.float-group input:not(:placeholder-shown) ~ label {
  top: -8px;
  font-size: 12px;
  color: #8b5cf6;
}
.float-group input:focus {
  border-bottom-color: #8b5cf6;
}