לייבלים מרחפים בטפסי אלמנטור כשעומדים על השדה

לייבלים מרחפים בטפסי אלמנטור כשעומדים על השדה

רוצים לייבלים מרחפים בטפסי אלמנטור כשעומדים על ...

רוצים לייבלים מרחפים בטפסי אלמנטור כשעומדים על השדה או לייבל "מרחף" מתוך השדה אל מעל השדה?

גזרו ושמרו…

את הקוד הבא מכניסים לתוך ווידג'ט 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)

נשאר רק לשחק עם הערכים ולהתאים למה שרוצים

לקישור חיצוני >>

נשמח לקבל תכנים נוספים שלדעתכם יכולים לעניין את קהל היעד

פרטי יצירת קשר
דילוג לתוכן