CSS-only Implementation Of Float Label Pattern With Automatic Fallback

floating-label-css-codepen

CSS only bulletproof Float Label style app with automatic fallback for any unsupported browser.

floating label css codepen, floating label input css, bootstrap floating label, floating placeholder css codepen, bootstrap 5 floating labels, floating label in bootstrap 4

  • No JS! Pure CSS!
  • No hacks with required and: valid!
  • HTML5 validation support!
  • Compatible with <select> and <textarea> fields!
  • No need to define for=”…” attribute on <label>!

How to make use of it:

Installations:

$ npm install float-label-css

1. Import float-label-css into your project or include the float-label.css stylesheet in your document.

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

2. Wrap the form fields and labels in a container called “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>

CSS Only Floating Label For Form Fields, Pure-CSS Float Label Plugin/Github


See Demo And Download

Official Website(anydigital): Click Here

This superior jQuery/javascript plugin is developed by anydigital. For extra advanced usage, please go to the official website.