CSS Only Floating Label For Form Fields

Category: CSS & CSS3 , Form , Recommended | May 12, 2017
Views Total:2,824 views
Official Page:Go to website
Last Update:May 12, 2017


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.


$ 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 class="has-float-label">
  <input id="last" type="text" placeholder="Surname"/>
  <label for="last">Last</label>

You Might Be Interested In:

One thought on “CSS Only Floating Label For Form Fields

Leave a Reply