Bulletproof CSS-only implementation of Float Label pattern with automatic fallback for ANY non-supporting browser.

  • By null
  • Last update: Dec 9, 2022
  • Comments: 7

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 protected]"/>
  <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 protected]"/>
  <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!

Github

https://github.com/anydigital/float-label-css

Comments(7)

  • 1

    checkbox not appears

    <div class="form-group">
                                        <label class="custom-control custom-checkbox">
                                            <input class="custom-control-input" type="checkbox"/>
                                            <span class="custom-control-indicator"></span>
                                            <span class="custom-control-description">Subscribe to newsletter</span>
                                        </label>
                                    </div>

    image

  • 2

    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.

  • 3

    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 disable href="#" links), by adding this code in input, select, textarea { } selector :

    &[placeholder="#"]::placeholder {
    color:transparent;
}
  • 4

    Bootstrap 4 input-group

    Doesn't work nicely with rounding the corners on input-group.

    Here's an example:

    <div class="form-group input-group has-float-label">
  <input class="form-control" type="text" name="title" id="title" value="" placeholder=" ">
  <label for="title">Title</label>
</div>

    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; }

  • 5

    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;     }

  • 6

    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

    @Html.EditorFor(m => m.Guarantor.FirstName, new {htmlAttributes = new {@class = "form-control", @placeholder = @Html.DisplayNameFor(m => m.Guarantor.FirstName )}}) @Html.LabelFor(m => m.Guarantor.FirstName)

  • 7

    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

    <div class="col-xs-12">
  <div class="form-group has-float-label">
    <input type="text" name="username" id="username" class="form-control" placeholder=" ">
    <label class="control-label" for="username">Username</label>
    <span class="help-block"> Help message </span>
  </div>
</div>

    Aparently, this change scss/_mixins.scss#L6 made all spans inside a .has-float-label element become a float label, when it shouldn't

    Can 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 made v1.0.2 required and this bug appeared.

    I know I can change the spans to p but how could I solve this without messing with the current HTML?

Popular Tag

Related