לייבלים מרחפים בטפסי בריקס

Sun Dec 03 2023 07:43:50 GMT+0000 (Coordinated Universal Time)

Saved by @Shesek

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

קוד CSS להוספה לוידג'ט הטופס /*floating labels*/ %root% .form-group{ position: relative; } %root% .form-group 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.form-group 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.form-group label{ font-size: 90%; }