如何重现谷歌登录表单效果

Question

我需要一点帮助。我正在尝试重现谷歌浏览器用户登录页面，但我被该表单的输入字段卡住了(真的很卡住，我什至不知道从哪里开始(。

我尝试检查Chrome页面，但很难理解如何重现它的效果

让我用一些代码来解释我自己。

因此，当我单击其中一个字段时，我的表单带有我的输入字段(如下所示(，我希望占位符像 Chrome 一样出现。

我真的不知道如何重现那种效果......点击前：未选择点击后：结果

<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

带有 CSS transform 和:placeholder-shown伪类。 诀窍是，您必须在输入中添加占位符(空格作为值(属性 - 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

谷歌设法让它看起来像 placeholder ，但它只是一个div，文本悬停在输入顶部。

这几乎就是如何做到的。

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

也许这样的事情会有所帮助：

.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;
}

小提琴：https://jsfiddle.net/x9khyv71/