Float Label Pure css

Pure-CSS Float Label. Here is everything in explain...!


Float label with the help of Bootstrap file and NPM guidance

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>

Demo


<form class="form-float-label">
    <div class="col-sm-6">
        <div class="form-group input-group">
            <span class="has-float-label">
                <input class="form-control" id="Name" type="text" placeholder="abc@xyz.com" />
                <label for="Name">First Name</label>
            </span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group input-group">
            <span class="has-float-label">
                <input class="form-control" id="last" type="text" placeholder="abc@xyz.com" />
                <label for="last">Last Name</label>
            </span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group input-group">
            <span class="has-float-label">
                <input class="form-control" id="contact1" type="text" placeholder="abc@xyz.com" />
                <label for="contact1">Contact Number</label>
            </span>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="form-group input-group">
            <span class="has-float-label">
                <input class="form-control" id="email" type="text" placeholder="abc@xyz.com" />
                <label for="email">Email</label>
            </span>
        </div>
    </div>
    <div class="col-sm-12">
        <div class="form-group input-group">
            <span class="has-float-label">
                <textarea class="form-control" id="message" placeholder="Message" cols="20" rows="5"></textarea>
                <label for="message">Message</label>
            </span>
        </div>
    </div>
</form>
                                    

Important Note

  • Use the class 'form-control' in <input> field
  • Use the class 'input-group' in <div>
  • Use the for="name" in <label> with input id

Usage


Add the float label css file in your page : float-label.min.css:

You can use these online links for float label css file or you can simply copy the link to URL and save the file.

<link href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css " rel="stylesheet" />
<link href="http://hovereffects.com/resource-css/bootstrap-float-label.min.css " rel="stylesheet" />
                                        

Use <label> with .has-float-label class as a wrapper for <input>

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

Note:

  • <span> should go after <input>.

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

<div class="has-float-label">
  <input type="email" placeholder="abc@xyz.com" />
  <label>Email</label>
</div>
                                        

Note:

  • <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 href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v4.0.0/dist/bootstrap-float-label.min.css " rel="stylesheet" />
<!-- Bootstrap v3 -->
<link href="https://cdn.rawgit.com/tonystar/bootstrap-float-label/v3.0.0/dist/bootstrap-float-label.min.css " rel="stylesheet" />
                                        

Browser Support


All Browser Support. You can use in any browser.

Click here to see reference website NPMJS