When it has to create stylish form, we always want to style our input tags to give the best look and feel,
Let's write few lines of code to make this magic happen,
<div class="group">
<input type="text" required>
<label>Name</label>
</div>
This is all for our markup,
Simple and easy, one div tag wrapping our input tag and label,
Important use required
attribute on input
, and make sure label
goes under input
tag, for the best practices I am using the label
, it could be anything span
etc,
so far so good, let's wrap up with adding few styles to make it stand out
.group{
position:relative;
margin:20px;
}
.group input {
padding:12px;
width:300px;
border:1px solid #ddd;
outline:none;
font-family:inherit;
font-size:16px;
}
.group label{
position: absolute;
top:13px;
left:12px;
font-size:16px;
pointer-events:none;
transition: all 0.3s ease;
}
input:focus + label, input:valid + label{
top: -11px;
background-color: #fff;
padding: 2px 4px;
color: #54565d;
font-size: 13px;
}
That's it no javascript, simple and easy...
Let's understand what we did here,
For the .group
class we have added position to relative and some spacing around it,
For the input
tag we did some basic styling which is self-understood,
For the label
we have added position to absolute
so that it can move relative to parent group
class, and set position from left and top,
pointer-events:none;
is used to prevent click on label part, & we have used transition
to allow smoothness,
input:focus + label
,input:valid + label
when we click oninput
we are addinglabel
to float our label upside usingtop: -11px
,
and if theinput:valid
label styles will remain as it is,
If you have covered till now, then I must say you have got good patience ;)
Top comments (0)