CSS Only Floating Label For Form Fields

Preview:

Description:

Yet another pure CSS implementation of the ‘Float Label pattern that floats the label up above the form field when the user starts entering a value.

Installation:

$ npm install float-label-css

How to use it:

Import the float-label-css to your project or include the stylehsheet float-label.css into the document as follow:

<link rel="stylesheet" href="dist/float-label.css"/>

Wrap the form fields and labels into a container named ‘has-float-label’ as follows:

<div class="has-float-label">
  <input id="first" type="text" placeholder="Name"/>
  <label for="first">First</label>
</div>
<div class="has-float-label">
  <input id="last" type="text" placeholder="Surname"/>
  <label for="last">Last</label>
</div>