<label>
<input type="text"/>
<span>Name</span>
</label>
label{
position: relative;
}
input{
font-size: inherit;
font-family: inherit;
line-height: 1.5em;
}
span{
position: absolute;
opacity: 0.6;
top: 0;
left: 2px;
cursor: text;
transition: all 0.5s ease-in-out;
}
input.has-value + span,
input:focus + span{
opacity: 1;
transform: translate(-2px, -1.5em);
font-size: 0.8em;
cursor: default;
}
html{
display: flex;
justify-content: center;
align-items: center;
height: 100%;
font-size: 2em;
}
document.querySelector('input').addEventListener('input', e => {
if(e.target.value){
e.target.classList.add('has-value')
}else{
e.target.classList.remove('has-value')
}
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.