Floating Label Input
Label that floats up on focus or input
How to use it
- Paste the HTML where the forms & inputs should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- No JavaScript needed.
<!-- Floating Label Input · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="flbl-wrap"><input class="flbl-input" id="flbl-f" type="text" placeholder=" " autocomplete="off"><label class="flbl-label" for="flbl-f">E-mailadres</label><span class="flbl-bar"></span></div>
</div>/* Floating Label Input · NedDev · eigen werk. */
.flbl-wrap{position:relative;width:300px;font-family:'Switzer',sans-serif}
.flbl-input{width:100%;box-sizing:border-box;padding:18px 14px 8px;font-size:15px;color:#0a0a0a;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:10px;outline:none;transition:border-color .2s}
.flbl-input:focus{border-color:#F5480F}
.flbl-label{position:absolute;left:14px;top:14px;color:rgba(10,10,10,.45);font-size:15px;pointer-events:none;transform-origin:left center;transition:transform .18s ease,color .18s ease}
.flbl-input:focus+.flbl-label,.flbl-input:not(:placeholder-shown)+.flbl-label{transform:translateY(-9px) scale(.78);color:#F5480F}
.flbl-bar{position:absolute;left:14px;right:14px;bottom:9px;height:2px;background:#F5480F;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.flbl-input:focus~.flbl-bar{transform:scaleX(1)}More forms & inputs
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →