Moving Placeholder to Top on Focus (Input Element)

If you want the placeholder to move to the top when the textbox is on focus and also while the user is typing, here’s the code for it:


  <input type="text" class="inputText" required/>
  <span class="floating-label">Email Address</span>


input:focus ~ .floating-label,
input:not(:focus):valid ~ .floating-label{
  top: 5px;
  bottom: 10px;
  left: 15px;
  font-size: 11px;
  height: 11px;
  opacity: 1;
  padding: 0 5px;

.inputText {
  font-size: 14px;
  width: 200px;
  height: 45px;
  padding: 0 10px;
  color: #202124;
  border: 1px solid gray;
  border-radius: 8px;

.floating-label {
  position: absolute;
  pointer-events: none;
  left: 20px;
  top: 22px;
  transition: 0.2s ease all;
  font-family: Roboto,'Noto Sans Myanmar UI',arial,sans-serif;