THEMETRIAL

Gmail Login Inspired Animated Placeholder In CSS

Author:joaovictornsv
Views Total:0 views
Official Page:Go to website
Last Update:November 21, 2020
License:MIT

Preview:

Gmail Login Inspired Animated Placeholder In CSS

Description:

A pure CSS solution to create an animated placeholder and make it behave like a floating label above the input field when focused. Inspired by Gmail’s login input.

How to use it:

1. Add a custom 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;
}


Source link

Add comment

NOTE :

All visitors can share my site’s content on their blogs, sites, and social networks to enrich the content

Only share the source www.themetrial.com

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.