<input type="text" id="name" onfocus="nameFunction()" placeholder="name"/>
#name {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
transition: 2s;
border: 2px solid #be3d3d;
border-radius: 20px;
text-indent: 10px;
font-family: Verdana;
outline: none;
}
function nameFunction() {
document.getElementById("name").style.borderRadius = "0px";
document.getElementById("name").style.transform = "scale(1.5)";
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.