Material Design Inspired Floaing Form Labels - Awesome Label
File Size: | 5.78 KB |
---|---|
Views Total: | 3997 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Awesome Label is a jQuery plugin for creating Material Design inspired animated floating form labels. Works with input
& texarea
fields. With floating inline labels, when the user engages with the text input field, the labels move to float above the field. Learn more.
See also:
- jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
- Material Design Styled Text Fields with jQuery and CSS3
- Simple jQuery Plugin For Inplace Input Labels - LabelinPlace
- jQuery Animated Input Field Label Plugin - Label Better
- jQuery Floating Placeholder Text Plugin - Placeholder Label
- jQuery Plugin For Text Field Float Label - floatlabels.js
How to use it:
1. Load the jQuery Awesome Label after you have jQuery JavaScript library loaded.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script src="libs/awesomelabel.min.js"></script>
2. Create a text field with the data-label attribute specifying the label text.
<input type="text" class="awesomelabel-label" data-label="Enter your username.."> <input type="password" class="awesomelabel-label" data-label="Enter your password.."> <textarea class="awesomelabel-label" data-label="Enter your message section.."></textarea>
3. Call the plugin and done.
$(document).ready(function(){ $('.awesome-label').awesomelabel(); });
4. Adjust the floating labels.
$('.awesomelabel').awesomelabel({ margin: '20px', padding: '20px', width: '250px', height: '30px', float: 'left', ease: '0.2' // This means 2 milliseconds });
5. Add your custom CSS styles to the floating labels.
.awesome-label { outline: none; background: transparent; border: none; border-bottom: 2px solid cornflowerblue; color: gray; } .awesome-label:focus { border-color: lightgray; } .awesome-label:focus ~ label { color: cornflowerblue; } .awesome-label-input-group label { font-family: georgia; font-size: 14px; font-style: italic; color: #bbb; }
This awesome jQuery plugin is developed by AmrSubZero. For more Advanced Usages, please check the demo page or visit the official website.