Move placeholder above the input on focus

Question

I\'m looking for css code that move the placeholder text above the input on focus. I found this code here. This code is perfect but my input tag is wrapped inside <

Answer 1

With the given links CSS etc, simply move the floating-label inside the blocking-span.

By using position: relative on the div the floating-label will still re-position as if it were outside the blocking-span

div {
  position: relative; /*  make label relate to div  */
  padding-top: 10px;  /*  make space for label      */
}
.inputText {
  font-size: 14px;
  width: 200px;
  height: 25px;
}
.floating-label {
  position: absolute;
  pointer-events: none;
  left: 15px;
  top: 18px;
  transition: 0.2s ease all;
}
input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label {
  top: -6px;
}

  
    
    Your email address