anydigital / Float Label Css
Licence: mit
Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.
Stars: ✭ 246
Projects that are alternatives of or similar to Float Label Css
Sbuttons
💡 Simple buttons you can use easily for your next project.
Stars: ✭ 207 (-15.85%)
Mutual labels: css3
Shorthand
Feature rich CSS framework for the new decade https://shorthandcss.com
Stars: ✭ 230 (-6.5%)
Mutual labels: css3
Css Examples
Code examples that accompany the MDN CSS documentation
Stars: ✭ 203 (-17.48%)
Mutual labels: css3
Spellbook Of Modern Webdev
A Big Picture, Thesaurus, and Taxonomy of Modern JavaScript Web Development
Stars: ✭ 13,450 (+5367.48%)
Mutual labels: css3
React Sweet Progress
A way to quickly add a progress bar to react app 🌈
Stars: ✭ 239 (-2.85%)
Mutual labels: css3
Micron
a [μ] microInteraction library built with CSS Animations and controlled by JavaScript Power
Stars: ✭ 2,252 (+815.45%)
Mutual labels: css3
Css Camera
New way to see a web page with CSS3 3D transform
Stars: ✭ 195 (-20.73%)
Mutual labels: css3
Youtube Dl Gui
A cross-platform GUI for youtube-dl made in Electron and node.js
Stars: ✭ 183 (-25.61%)
Mutual labels: css3
Html Templates
100 (one hundred) simple and elegant HTML templates 💯
Stars: ✭ 240 (-2.44%)
Mutual labels: css3
Startpages.github.io
A curated list of startpages for your browser.
Stars: ✭ 228 (-7.32%)
Mutual labels: css3
Pure-CSS Float Label. Finally.
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
requiredand: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 protected]"/>
<span>Email</span>
</label>
NOTE:
- W3C allows this.
-
<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 protected]"/>
<label for="email">Email</label>
</div>
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 -->
<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
- @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!
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].