Home CSS & CSS3 CSS-only Implementation Of Float Label Pattern With Automatic Fallback

CSS-only Implementation Of Float Label Pattern With Automatic Fallback

CSS & CSS3 webcodeflow · April 20, 2022 · Comments off

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>!

Bootstrap 5 Floating Label Form Controls Library

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