Floating Label jQuery plugin

This plugin create with the right HTML a smart floating label 🎈

Examples:

Bootstrap Example

Full Name

Big input

Javascript:

$("#basic input").floatingLabel();

Dark Example

Full Name

E-mail

Javascript:

$("#dark input").floatingLabel({
  placeholderColor: "#8c8c8c"
});

Material Example

Full Name

E-mail

Javascript:

$("#full-name").floatingLabel();

HTML Code:

<div>
    <label for="fullname">Full Name</label>
    <input type="text" id="fullname">
</div>

Settings

Option	Type	Default	Possibilities
transition	boolean	true	If you want the label to be animated
transitionProperties	string	all	The css properties you want to be animated. Example: `"background, color, border"`
transitionDuration	string	.2s	How long should be the transition. Example: `"1s"`
placeholderColor	string	The text color of the input	The text color when the label plays like a placeholder. Example: `"#ff0000"`

$("#full-name").floatingLabel({
  transitionProperties: 'background',
  transitionDuration: '.3s',
  placeholderColor: 'pink'
});

Overriding CSS

Custom CSS

E-mail

The label has a class floating and when it float the class is is added.
⚠ You may need to add !important to your rules.

SASS example:

.floating {
  color: green!important;

  &.is {
    color: red!important;
    border: 0.0625rem solid #dee2e6;
    border-radius: .5rem;
    padding: .2rem .5rem!important;
  }
}