css in html how to,html - How to do floating of labels in CSS - Stack Overflow

Check this Tutorial Link

This is inspired by latest Gmail Login style

HTML

It's nice to meet you.

Enter your email

Enter your password

Login

CSS Style

.field-wrapper{

position: relative;

margin-bottom: 15px;

}

.field-wrapper input{

border: 1px solid #DADCE0;

padding: 15px;

border-radius: 4px;

width: 100%;

}

.field-wrapper input:focus{

border:1px solid #1A73E8;

}

.field-wrapper .field-placeholder{

font-size: 16px;

position: absolute;

/* background: #fff; */

bottom: 17px;

-webkit-box-sizing: border-box;

box-sizing: border-box;

color: #80868b;

left: 8px;

padding: 0 8px;

-webkit-transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);

transition: transform 150ms cubic-bezier(0.4,0,0.2,1),opacity 150ms cubic-bezier(0.4,0,0.2,1);

z-index: 1;

text-align: left;

width: 100%;

}

.field-wrapper .field-placeholder span{

background: #ffffff;

padding: 0px 8px;

}

.field-wrapper input:not([disabled]):focus~.field-placeholder

{

color:#1A73E8;

}

.field-wrapper input:not([disabled]):focus~.field-placeholder,

.field-wrapper.hasValue input:not([disabled])~.field-placeholder

{

-webkit-transform: scale(.75) translateY(-39px) translateX(-60px);

transform: scale(.75) translateY(-39px) translateX(-60px);

}

jQuery Event Listener

$(".field-wrapper .field-placeholder").on("click", function () {

$(this).closest(".field-wrapper").find("input").focus();

});

$(".field-wrapper input").on("keyup", function () {

var value = $.trim($(this).val());

if (value) {

$(this).closest(".field-wrapper").addClass("hasValue");

} else {

$(this).closest(".field-wrapper").removeClass("hasValue");

}

});