לייבלים מרחפים בטפסי פלואנטפורמס

PHOTO EMBED

Sun Dec 03 2023 07:34:59 GMT+0000 (Coordinated Universal Time)

Saved by @Shesek 

<script>
document.querySelectorAll("input, textarea").forEach(function(element) {
  element.addEventListener("focus", function() {
    this.closest(".ff-el-group").classList.add("focused");
  });
  element.addEventListener("blur", function() {
    var inputValue = this.value;
    if (inputValue === "") {
      this.closest(".ff-el-group").classList.remove("focused");
    }
  });
});
</script>
content_copyCOPY

קוד CSS להוספה לוידג'ט הטופס /*floating labels*/ %root% .ff-el-group{ position: relative; } %root% .ff-el-input--label{ position: absolute!important; right: 1.5rem; top: 1rem; 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; } %root% .focused .ff-el-input--label { background-color: #fff; line-height:1.5; padding: .1em .5em; box-shadow: 0 0 3px; border-radius: 3px; right: 1rem; -webkit-transform: translateY(-100%); transform: translateY(-100%); } %root% .focused .ff-el-input--label label{ font-size: 90%; }