How to reproduce google login form effect

Question

i need a bit of help. I'm trying to reproduce the google chrome user login page and i'm stucked (really stucked i don't even know where to start) with the input field of that form.

i tried inspecting chrome page but is quite difficult to understand how to reproduce the effect it has

let me explain my self with a little of code.

so i have my form with my inputs field (like shown under) when i click one of the field i want that the place holder come up like chrome do.

i really have no idea how to reproduce that kind of effect... before click: not selected after click: 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;
}

Answer 1

with css transform and :placeholder-shown pseudo class. Trick is, you have to add a placeholder(space as value) attribute to the inputs - placeholder=" " .

 .g-input { position: relative; margin-bottom: 10px; box-sizing: border-box; display: inline-block; } .g-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; } .g-input input, .g-input textarea { border: 1px solid #ddd; display: block; padding: 10px; border-radius: 3px; width: 100%; box-sizing: border-box; } .g-input.fill { display: block; width: 100%; } .g-input input:focus, .g-input textarea:focus { outline: 0; border-color: #1873e8; } .g-input input:focus+label, .g-input input:not(:placeholder-shown)+label, .g-input textarea:focus+label, .g-input textarea:not(:placeholder-shown)+label{ transform: translateX(-3px) translateY(-15px); font-size: 10px; color: #1a73e8; }

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

Answer 2

Google manage to make it look like placeholder , but it is just a div with text that is moving hover and on top of the input.

This is pretty much how to do it.

 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 3

Perhaps something like this could help:

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/