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:
HTML:
<div>
<input type="text" class="inputText" required/>
<span class="floating-label">Email Address</span>
</div>
CSS:
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;
background-color:#fff;
}
.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;
}
Demo:
