Pure-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
<select>
fields! - No need to define
for="..."
attribute on<label>
! v1.0.1+
Demo
Usage
Include float-label.min.css
:
Use <label>
with .has-float-label
class as a wrapper for <input>
v1.0.1+:
Email
NOTE:
- W3C allows this.
<span>
should go after<input>
.
Alternatively wrap <input>
and <label>
by .has-float-label
:
Email
NOTE:
- W3C allows this as well.
<label>
should go after<input>
.for="..."
attribute is required on<label>
.
Quick use: Bootstrap
Instead of float-label.min.css
just include pre-built bootstrap-float-label.min.css
:
<!-- Bootstrap v4 --> <!-- Bootstrap v3 -->
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!