时间戳

首页 > 解决方案 > 如何重现google登录表单效果

javascript - 如何重现google登录表单效果

问题描述

我需要一点帮助。我正在尝试重现 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;
}

标签： javascripthtmlcss

解决方案

带有csstransform和: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>

推荐阅读