Skip to content

Instantly share code, notes, and snippets.

@kisildev
Created May 16, 2019 15:26
Show Gist options
  • Save kisildev/a04bcf65e6662c007f8ebc691adb19d6 to your computer and use it in GitHub Desktop.
Save kisildev/a04bcf65e6662c007f8ebc691adb19d6 to your computer and use it in GitHub Desktop.
Form input animation on focus
{code} // On click of input field the label became smaller and change to red
.gfield {
position: relative;
&_visibility_hidden {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
&_label {
font-size: 25px;
font-weight: 400;
position: absolute;
top: 22px;
left: 13px;
line-height: 1.2;
transition: all 0.4s ease-in-out;
color: #909090;
.hidden_label & {
display: none;
}
&.active {
color: $red;
top: 0;
font-size: 14px;
line-height: (16 / 14);
}
}
}
select {
option {
&.gf_placeholder {
display: none;
}
}
}
// On click of input field the label became smaller and change to red
function formsHandler() {
$('input, textarea, select', '.gfield').each(function () {
$(this).attr('placeholder', '');
if (
!$(this)
.closest('.gfield')
.find('.gfield_label')
.hasClass('active')
) {
if ($(this).val()) {
$(this)
.closest('.gfield')
.find('.gfield_label')
.addClass('active')
}
$(this).on('focusin', function () {
$(this)
.closest('.gfield')
.find('.gfield_label')
.addClass('active')
});
$(this).on('focusout', function () {
if (!$(this).val()) {
$(this)
.closest('.gfield')
.find('.gfield_label')
.removeClass('active')
}
});
}
});
}
$(document).ready(function () {
// On click of input field the label became smaller and change to red
formsHandler();
$(document).bind('gform_post_render', function () {
formsHandler()
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment