Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Floating Labels for BootSwatch Paper
$('.form-control').on('focus blur', function (e) {
$(this).parents('.form-group').toggleClass('focused', (e.type === 'focus' || this.value.length > 0));
}).trigger('blur');
.form-group {
display: flex;
height: 55px;
}
.control-label {
font-size: 16px;
font-weight: 400;
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translate3d(0, 22px, 0) scale(1);
transform-origin: left top;
transition: 240ms;
}
.form-group.focused .control-label {
opacity: 1;
transform: scale(0.75);
}
.form-control {
align-self: flex-end;
}
.form-control::-webkit-input-placeholder {
color: transparent;
transition: 240ms;
}
.form-control:focus::-webkit-input-placeholder {
transition: none;
}
.form-group.focused .form-control::-webkit-input-placeholder {
color: #bbb;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.