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
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 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!
checkbox not appears
Float label select
I can see that you have CSS for select tag, but I cant see a demo and I cant seem to figure out how exactly it is supposed to work. Kudos for this. I searched a lot for no JS floating label input.
Don't works without placeholder
Float label works with
placeholder=""
but it don't works without placeholder attribute in an input element.I found a workaround by styling an invisible placeholder if it is equal to
#
(like to disablehref="#"
links), by adding this code ininput, select, textarea { } selector
:Bootstrap 4 input-group
Doesn't work nicely with rounding the corners on input-group.
Here's an example:
And here's kind of a fix, could be improved probably:
.has-float-label input:first-child:nth-last-child(2) { border-top-right-radius: .25em; border-bottom-right-radius: .25em; }
compatibility with select2
To make has-float-label compatible with select2. In previous versions you only need to apply a small change in the script, ".has-float-label> span" add the pseudo-element "not (.select2)" to prevent -float-label from being applied to the span tags that you create select2 but now with the style improvements it is not possible to apply that change.
.has-float-label label, .has-float-label> span: not (.select2) { position: absolute; left: 0; top: 0; cursor: text; font-size: 75%; opacity: 1; -webkit-transition: all .2s; transition: all .2s; top: -.5em; left: 0.75rem; z-index: 3; line-height: 1; padding: 0 1px; }
Validation messages overlay field name
I am developing a new app and love the visual for the float label. However when I add an asp-validation- the field name is overlay-ed. I would like the validation messages to appear under the field. I don't know if this is my lack of my knowledge of HTML/CSS or understanding of the usage of the add in. Here is an section of the cshtml file
has-float-label class apply on all labels
This code worked fine in version 1.0.0, now in version 1.0.2 it breaks
Aparently, this change scss/_mixins.scss#L6 made all spans inside a
.has-float-label
element become a float label, when it shouldn'tCan someone explain to me why this change was made? And why it was needed?
In my application we have a lot of fields, all of them using float label. We had been using
v1.0.0
, but a new dependency madev1.0.2
required and this bug appeared.I know I can change the
span
s top
but how could I solve this without messing with the current HTML?