CSS Only Floating Label For Form Fields

Author: tonystar
Views Total: 2,601 views
Official Page: Go to website
Last Update: May 12, 2017
License: MIT


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>

See also  Mega Menu using HTML & CSS

Leave a Reply

Your email address will not be published. Required fields are marked *