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 is inspired by the Gmail login input.
animated placeholder css, input field placeholder animation, move label on input focus, gmail input css, form input animation css, floating label for select box css, placeholder as label
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, pure css floating label
See Demo And Download
Official Website(joaovictornsv): Click Here
This superior jQuery/javascript plugin is developed by joaovictornsv. For extra advanced usage, please go to the official website.
Be First to Comment