Pure CSS floating label

Un floating label en pur css ! \o/ Merci Timo !


<label>
<input type="text" id="name" placeholder=" ">
<span>Name</span>
</label>
<label>
<input type="password" id="password" placeholder=" ">
<span>Password</span>
</label>





label {
position: relative;
}

input {
padding: 10px;
border: 1px silver solid;
}
span {
position: absolute;
transition: all 200ms;
opacity: 0.5;
left: 0px;
padding: 10px;
transform-origin: top left;
}

input:not(:placeholder-shown) + span {
transform: translateY(-100%) scale(.75);
opacity: 1;
padding: 0 10px;
}



Via https://lehollandaisvolant.net/?id=20190109140902
Fil RSS des articles de ce mot clé