如何为登录页面创建动态占位符？

Question

当前的 GMail 登录页面有一个 "Email or phone" 占位符文本，该文本会缩小并移至焦点字段的左上角。如何使用 CSS and/or JS 实现类似的东西？

Answer 1

首先，欢迎来到 Whosebug！

它被称为"floating labels"，它可以通过单独使用CSS来实现（如果你不太熟悉像:focus和这样的伪选择器，这可能会有点困难:empty) 或者使用一点JS，这样可能会更容易一些。

您可以在此处查看一些示例：https://css-tricks.com/float-labels-css/

Answer 2

一个简单易行的例子：

label {
  margin:20px 0;
  position:relative;
  display:inline-block;
}
  
span {
  padding:10px;
  pointer-events: none;
  position:absolute;
  left:0;
  top:0;
  transition: 0.2s;
  transition-timing-function: ease;
  transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  opacity:0.5;
}

input {
  padding:10px;
}

input:focus + span, input:not(:placeholder-shown) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

/* For IE Browsers*/
input:focus + span, input:not(:-ms-input-placeholder) + span {
  opacity:1;
  transform: scale(0.75) translateY(-100%) translateX(-30px);
}

<label>
  <input placeholder=" ">
  <span>Placeholder Text</span>
</label>

如何为登录页面创建动态占位符？

How to create a dynamic placeholder for a login page?

javascript

css

web

google-signin

login-page