Floating Form Labels

</ head>

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>

</ body>

<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.0/index.min.js"></script>
<script>
window.CodeCrumbs.floatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>

HTML/Embed

<!-- FORM STYLES --> 
<style>
.input-label {
	pointer-events: none;
}

.input::placeholder {
	opacity: 0;
  transition: opacity .2s ease-out;
}

.input:focus::placeholder {
	opacity: 1;
}
</style>
Only tabs with a " " have code.
<!-- FLOATING FORM LABELS -->
<script defer src="https://cdn.jsdelivr.net/gh/CodeCrumbsApp/floating-form-labels@0.1.0/index.min.js"></script>
<script>
window.CodeCrumbs.floatLabels({
  inputSelector: ".input",
  labelActiveClass: "float",
})
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
<!-- CodeCrumbs -->
<script>
!function(e,t){e[t]=new Proxy(e[t]||{},{get:(e,o)=>new Proxy(e[o]||function(){},{apply:(n,r,a)=>{const c=()=>e[o](...a);"complete"===document.readyState?c():document.addEventListener("readystatechange",(n=>{"complete"===n.target.readyState&&(e?.[o]?c():console.error(`${t}.${o} is not a function. Did it load correctly from the CDN? If not, did you use the correct name.`))}))}})})}(globalThis,"CodeCrumbs");
</script>
Only tabs with a " " have code.
If you have already pasted this code into your project then you can skip this. If you haven't, and it's your first time using CodeCrumbs, then copy this code and navigate to your sites global settings > Custom Code tab > paste it into the <head> (first custom code block). It just needs to exist once.
Author
CodeCrumbs
Updated on
Nov 14, 2022

How to use:

Tutorial Coming Soon!

Check Browser Support

Interactive Table

With this crumb we can simply create what is commonly known as floating form labels. A UI effect that allows you to display form labels as placeholders initially and animate them to typical labels.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor