Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
HTML CSS
Clone or download
Latest commit da83866 Mar 13, 2017
pvnr0082t and tonystar Add CDNJS version badge in README.md (#17)
This badge will show the version on CDNJS!

README.md

Pure-CSS Float Label. Finally.

CDNJS npm version retweet dribbble codepen

Now hosted on CDNJS! • And 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> and <textarea> fields!
  • No need to define for="..." attribute on <label>! v1.0.1+

Demo

Usage

Include float-label.min.css:

<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/float-label-css/v1.0.2/dist/float-label.min.css"/>

Use <label> with .has-float-label class as a wrapper for <input> v1.0.1+:

<label class="has-float-label">
  <input type="email" placeholder="email@example.com"/>
  <span>Email</span>
</label>

NOTE:

  1. W3C allows this.
  2. <span> should go after <input>.

Alternatively wrap <input> and <label> by .has-float-label:

<div class="has-float-label">
  <input id="email" type="email" placeholder="email@example.com"/>
  <label for="email">Email</label>
</div>

NOTE:

  1. W3C allows this as well.
  2. <label> should go after <input>.
  3. 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 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css"/>

<!-- Bootstrap v3 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.min.css"/>

Markup is the same. For more details see: https://github.com/tonystar/bootstrap-float-label.

Credits

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!