<div class="modern-form">
<h3>Modern Form</h3>
<fieldset class='float-label-field'>
<label for="txtName">Name</label>
<input id="txtName" type='text'>
</fieldset>
<fieldset class='float-label-field'>
<label for="txtEmail" >Email</label>
<input id="txtEmail" type='text'>
</fieldset>
<fieldset class='float-label-field'>
<label for="txtPassword">Password</label>
<input id="txtPassword" type='password'>
</fieldset>
<fieldset class='float-label-field'>
<label for="txtConfirmPassword">Confirm Password</label>
<input id="txtConfirmPassword" type='password'>
</fieldset>
</div>
body {
font-family: "Open Sans";
background-color: #efefef;
}
.modern-form {
width: 500px;
margin: 30px auto;
background-color: #fff;
border: solid 1px #ccc;
padding: 20px 10px;
}
.modern-form h3 {
text-align: center;
}
.float-label-field {
border: none;
outline: none;
position: relative;
margin: 0 0 20px 0;
padding: 0;
box-sizing: border-box;
}
.float-label-field input {
border: none;
outline: none;
padding: 5px 5px 8px 0px;
width: 100%;
font-size: 18px;
border-bottom: solid 1px #efefef;
}
.float-label-field label {
opacity: 0.5;
position: absolute;
top: 10px;
left: 0px;
transition: all 0.2s ease;
font-size: 18px;
}
.float-label-field.focus label {
color: orange;
}
.float-label-field.focus input {
border-bottom: solid 1px orange;
}
.float-label-field.float label {
opacity: 1;
top: -8px;
font-size: 60%;
transition: all 0.2s ease;
font-weight: bold;
}
$('head').append('');
$('input').focus(function(event) {
$(this).closest('.float-label-field').addClass('float').addClass('focus');
})
$('input').blur(function() {
$(this).closest('.float-label-field').removeClass('focus');
if (!$(this).val()) {
$(this).closest('.float-label-field').removeClass('float');
}
});