CSS Only Floating Label For Form Fields

Category: CSS & CSS3 , Form , Recommended | May 12, 2017
Author: tonystar
Views Total: 1,565
Official Page: Go to website
Last Update: May 12, 2017
License: MIT

Preview:

CSS Only Floating Label For Form Fields

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>

One thought on “CSS Only Floating Label For Form Fields

Leave a Reply