רוצים לייבלים מרחפים בטפסי אלמנטור כשעומדים על השדה או לייבל "מרחף" מתוך השדה אל מעל השדה?
גזרו ושמרו…
את הקוד הבא מכניסים לתוך ווידג'ט HTML
<script>
jQuery("input , textarea").focus(function(){
jQuery(this).parents('.elementor-field-group').addClass('focused');
});
jQuery("input , textarea").blur(function(){
var inputValue = jQuery(this).val();
if ( inputValue == "" ) {
jQuery(this).parents('.elementor-field-group').removeClass('focused');
}
});
</script>
Code language: HTML, XML (xml)
ואת הקוד הזה לתוך ה CSS מותאם בלשונית מתקדם
selector .elementor-field-group {
position: relative;
}
selector .elementor-field-label {
position: absolute;
left: 15px;
top: 10px;
color: #999;
z-index: 10;
transition: font-size 150ms ease-out, -webkit-transform 150ms ease-out;
transition: transform 150ms ease-out, font-size 150ms ease-out;
transition: transform 150ms ease-out, font-size 150ms ease-out, -webkit-transform 150ms ease-out;
}
selector .focused .elementor-field-label {
background-color: #fff;
line-height:1.5;
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
font-size: .90em;
}
Code language: CSS (css)
נשאר רק לשחק עם הערכים ולהתאים למה שרוצים