Create Float labels with few lines of CSS only

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 on input we are adding label to float our label upside using top: -11px,
and if the input:valid label styles will remain as it is,

If you have covered till now, then I must say you have got good patience ;)

https://codepen.io/imaknoo/pen/GRrYqwE