Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
npm install float-label-cssPure-CSS Float Label. Finally.
==============================




> Now shipped with Bootstrap Kit!
Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
* No JS! Pure CSS!
* No hacks with required and :valid!
* ↳ HTML5 validation support!
* Compatible with fields!
* No need to define for="..." attribute on ! v1.0.1+

* No-dependencies demo
* Bootstrap 3 demo
* Bootstrap 4 demo
Include float-label.min.css:
``html`
Use
1. W3C allows this.
2. should go after .
*
Alternatively wrap and by .has-float-label:`html`
NOTE:
1. W3C allows this as well.
2. should go after .for="..."
3. attribute is required on .
Instead of float-label.min.css just include pre-built bootstrap-float-label.min.css:`html
`
Markup is the same. For more details see: https://github.com/tonystar/bootstrap-float-label.
* @mds for the original pattern
* @chriscoyier for the input:focus + label
* @thatemil for the :placeholder-shown
Any browser with :placeholder-shown` CSS pseudo-class: http://caniuse.com/#feat=css-placeholder-shown.
All non-supporting browsers will fall back to the static layout (w/o animation).
=> Can be used in ANY browser as is!