A step-by-step guide on replicating the Google login form animation

Question

A step-by-step guide on replicating the Google login form animation

Help needed here! I'm attempting to recreate the user login page for Google Chrome, and I've hit a roadblock (seriously, I don't even know where to start) with the input field of that form.

I have tried inspecting Chrome's page, but it's quite challenging to understand how to replicate the effect it has.

Let me illustrate with a bit of code.

Here is my form with input fields (as shown below). When I click on one of the fields, I want the placeholder to appear as it does in Chrome.

I really can't figure out how to achieve that kind of effect... Before clicking: not selected After clicking: result

<input type="text" name="user-name" placeholder="Username"></input>
<input type="password" name="password" placeholder="Password"></input>

input{
border:solid 1px #222;
}
input:focus{
border:solid 2px #ddb760;
}

javascript html css

Answer 1

Answer №1

To achieve this effect, you can use CSS properties like `transform` and the pseudo-class `:placeholder-shown`. It's important to note that you need to include a placeholder attribute with a space value in your input elements, like so: placeholder=" ".

.custom-input {
  position: relative;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.custom-input label {
  background: white;
  padding: 3px;
  font-size: 12px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom left;
  color: #ddd;
  font-family: arial;
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  cursor: text;
}

.custom-input input, .custom-input textarea {
  border: 1px solid #ddd;
  display: block;
  padding: 10px;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

.custom-input.fill {
  display: block;
  width: 100%;
}

.custom-input input:focus, .custom-input textarea:focus {
  outline: 0;
  border-color: #1873e8;
}

.custom-input input:focus+label, .custom-input input:not(:placeholder-shown)+label,
.custom-input textarea:focus+label, .custom-input textarea:not(:placeholder-shown)+label{
  transform: translateX(-3px) translateY(-15px);
  font-size: 10px;
  color: #1a73e8;
}

<div class="custom-input">
  <input type="text" id="user-name" name="user-name" placeholder=" ">
  <label for="user-name">Username</label>
</div>
<div class="custom-input">
  <input type="password" id="password" name="password" placeholder=" ">
  <label for="password">Password</label>
</div>

<div class="custom-input fill">
  <input type="text" id="user-name2" name="user-name2" placeholder=" ">
  <label for="user-name2">Username</label>
</div>
<div class="custom-input fill">
  <input type="password" id="password2" name="password2" placeholder=" ">
  <label for="password2">Password</label>
</div>

<div class="custom-input fill">
  <textarea id="ta" name="ta" placeholder=" "></textarea>
  <label for="ta">Textarea</label>
</div>

Answer 2

To achieve this effect, you can use CSS properties like `transform` and the pseudo-class `:placeholder-shown`. It's important to note that you need to include a placeholder attribute with a space value in your input elements, like so: placeholder=" ".

.custom-input {
  position: relative;
  margin-bottom: 10px;
  box-sizing: border-box;
  display: inline-block;
}
.custom-input label {
  background: white;
  padding: 3px;
  font-size: 12px;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom left;
  color: #ddd;
  font-family: arial;
  position: absolute;
  top: 7px;
  left: 7px;
  z-index: 1;
  cursor: text;
}

.custom-input input, .custom-input textarea {
  border: 1px solid #ddd;
  display: block;
  padding: 10px;
  border-radius: 3px;
  width: 100%;
  box-sizing: border-box;
}

.custom-input.fill {
  display: block;
  width: 100%;
}

.custom-input input:focus, .custom-input textarea:focus {
  outline: 0;
  border-color: #1873e8;
}

.custom-input input:focus+label, .custom-input input:not(:placeholder-shown)+label,
.custom-input textarea:focus+label, .custom-input textarea:not(:placeholder-shown)+label{
  transform: translateX(-3px) translateY(-15px);
  font-size: 10px;
  color: #1a73e8;
}

<div class="custom-input">
  <input type="text" id="user-name" name="user-name" placeholder=" ">
  <label for="user-name">Username</label>
</div>
<div class="custom-input">
  <input type="password" id="password" name="password" placeholder=" ">
  <label for="password">Password</label>
</div>

<div class="custom-input fill">
  <input type="text" id="user-name2" name="user-name2" placeholder=" ">
  <label for="user-name2">Username</label>
</div>
<div class="custom-input fill">
  <input type="password" id="password2" name="password2" placeholder=" ">
  <label for="password2">Password</label>
</div>

<div class="custom-input fill">
  <textarea id="ta" name="ta" placeholder=" "></textarea>
  <label for="ta">Textarea</label>
</div>

Answer 3

Answer №2

When it comes to making the design look like a placeholder, Google has successfully achieved this by using a div with text that moves on hover and appears on top of the input field.

Here is a simple way to implement this:

var text = document.getElementById("text");
var label = document.getElementById("label-text");

text.addEventListener("focusout", onfocusout);

function onfocusout(e) {
if (text.value.length > 0) text.classList.add('not-empty');
else text.classList.remove('not-empty');
}

// allow focus of the input even on click of div
label.onclick = function(e) {
text.focus();
}

.input-group {
  position: relative;
}

#text {
  padding: 10px;
  
  border: 1px solid black;  
  outline: none;
}

#label-text {
  padding: 0 5px;

  position: absolute;
  top: 10px;
  left: 5px;
  
  background-color: #fff;
  color: #999;
  
  transition: .2s;
}

#text:focus {
  border-color: blue;
}

#text:focus + #label-text {  
  color: blue;
}

#text:focus + #label-text, #text.not-empty + #label-text {
  top: -10px;
  left: 5px;
}

<br><br>

<div class="input-group">
  <input id="text" type="text" onfocusout="" />
  <div id="label-text">Username</div>
</div>

Answer 4

When it comes to making the design look like a placeholder, Google has successfully achieved this by using a div with text that moves on hover and appears on top of the input field.

Here is a simple way to implement this:

var text = document.getElementById("text");
var label = document.getElementById("label-text");

text.addEventListener("focusout", onfocusout);

function onfocusout(e) {
if (text.value.length > 0) text.classList.add('not-empty');
else text.classList.remove('not-empty');
}

// allow focus of the input even on click of div
label.onclick = function(e) {
text.focus();
}

.input-group {
  position: relative;
}

#text {
  padding: 10px;
  
  border: 1px solid black;  
  outline: none;
}

#label-text {
  padding: 0 5px;

  position: absolute;
  top: 10px;
  left: 5px;
  
  background-color: #fff;
  color: #999;
  
  transition: .2s;
}

#text:focus {
  border-color: blue;
}

#text:focus + #label-text {  
  color: blue;
}

#text:focus + #label-text, #text.not-empty + #label-text {
  top: -10px;
  left: 5px;
}

<br><br>

<div class="input-group">
  <input id="text" type="text" onfocusout="" />
  <div id="label-text">Username</div>
</div>

Answer 5

Answer №3

Maybe this solution could be helpful:

HTML:

<input type="text" name="user-name" placeholder="Username" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
<input type="password" name="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">

CSS:

input {
  border:solid 1px #ddb760;
}

input:focus {
  border:solid 1px blue;
}

Fiddle: https://jsfiddle.net/x9khyv71/

Answer 6

Maybe this solution could be helpful:

HTML:

<input type="text" name="user-name" placeholder="Username" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Username'">
<input type="password" name="password" placeholder="Password" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Password'">

CSS:

input {
  border:solid 1px #ddb760;
}

input:focus {
  border:solid 1px blue;
}

Fiddle: https://jsfiddle.net/x9khyv71/

A step-by-step guide on replicating the Google login form animation

Answer №1

Answer №2

Answer №3

Similar questions

Offcanvas navigation in Bootstrap 5

Google Maps API displaying empty spots instead of markers

Is it possible to activate the jQuery .click() function for a button with specific text?

Looking for a way to extract Regular Expressions from an IgGrid cell in Infragistics?

boosting the maximum number of requests allowed

What is preventing Protractor from detecting Angular on a site that has been automatically initialized with Angular?

Retrieving file icons from a directory using Node.js fs

Display or conceal image based on date

I am looking to implement a required alert for a radio button that mimics HTML5. How can

What is the process for reverting to an older version of Webpack?

After my jQuery functions are executed, my CSS rules are loaded

Are you in need of an IDE for Javascript, CSS, HTML, or Java

Learn the process of uploading a file using FormData alongside multer in node js. Experience the issue of receiving undefined in req.file and { } in req.body

Why isn't the CSS class being applied to the checkbox element?

Form an item using an array

Iterate through a intricate array of JavaScript objects to extract their values

Choosing an id of my preference to set as the value in the ng-options select list and ensuring proper binding with ng-model

I keep receiving a warning from React-Router stating that it is not possible to modify the <Router routes> component

Check the vuelidate required function in Vye.js for ensuring that all necessary fields

ERESOLVE encountered difficulty resolving the error during the execution of npm install