Input with a floating/animated placeholder, the process is similar to logging in to Google. This plugin makes it behave like a floating label above the input field when in focus and inspired by the Gmail login input.
How to make use of it:
1. Add a customized placeholder to your input field as follows:
<div class="input-block"> <input type="text" name="input-text" id="input-text" required spellcheck="false"> <span class="placeholder"> Placeholder </span> </div>
2. The required CSS for the animated placeholder.
div.input-block { position: relative; } div.input-block input { font-size: 1.6rem; color: #495055; width: 350px; padding: 15px 15px; border-radius: 1rem; border: 2px solid #D9D9D9; outline: none; } div.input-block span.placeholder { position: absolute; margin: 17px 0; padding: 0 4px; color: #6c757d; display: flex; align-items: center; font-size: 1.6rem; top: 0; left: 17px; transition: all 0.2s; transform-origin: 0% 0%; background: none; pointer-events: none; } div.input-block input:valid+span.placeholder, div.input-block input:focus+span.placeholder { transform: scale(0.8) translateY(-30px); background: #fff; } div.input-block input:focus { color: #284B63; border-color: #284B63; } div.input-block input:focus+span.placeholder { color: #284B63; }
Gmail Login Inspired Animated Placeholder, Placeholder animated Plugin/Github
See Demo And Download
Official Website(joaovictornsv): Click Here
This superior jQuery/javascript plugin is developed by joaovictornsv. For extra Advanced Usages, please go to the official website.
Be First to Comment