JS (jQuery) - מוסיף קלאס לתווית כאשר השדה בפוקוס.
ניתן לשים את הקוד בתוך ווידג'ט HTML בעמוד.
<script>
jQuery(document).ready(function($){
$(".elementor-field").focus(function() {
$(this).prev('.elementor-field-label').addClass("active-field-label");
}).focusout(function() {
if(!$(this).val()) {
$(this).prev('.elementor-field-label').removeClass("active-field-label");
}
});
});
</script>
CSS - מבצע את ריחוף התווית כאשר השדה בפוקוס.
יש לשים את הקוד בתוך ווידג'ט הטופס.
במידה והטופס באנגלית, יש להחליף right ב-left.
ניתן לשחק / להוסיף ערכים לקלאס החדש כדי להתאים את התוצאה לצורך שלכם!
.elementor-form .elementor-field-label {
position: absolute;
right: 18px;
transition-duration: .2s;
}
.elementor-field-label.active-field-label{
transform: translateY(-20px);
font-size: 16px !important;
}
.elementor-field{
box-shadow: none !important;
}