float-label-css
v1.0.2
Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
0/weekUpdated 3 years agoMIT
Published by Anton Staroverov
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+
Demo
* No-dependencies demo
* Bootstrap 3 demo
* Bootstrap 4 demo
Usage
Include float-label.min.css:
``html`
Use
1. W3C allows this.
2. should go after .
*
Alternatively wrap and
1. W3C allows this as well.
2.
$3
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.
Credits
* @mds for the original pattern
* @chriscoyier for the input:focus + label
* @thatemil for the :placeholder-shown
Browser support
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!