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

Question

当前的GMail登录页面包含一个“电子邮件或电话”占位符文本，该文本的大小减小并且移至焦点所在字段的左上角。 如何使用CSS和/或JS实现类似的目的？

Answer 1

首先，欢迎使用StackOverflow！

它被称为“浮动标签”，可以通过单独使用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>