CSS Only Floating Label For Form Fields

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>