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

Question

我需要一些帮助。 我正在尝试重现 google chrome 用户登录页面，但我被该表单的输入字段卡住了（真的卡住了，我什至不知道从哪里开始）。

我尝试检查 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/