当前的 GMail 登录页面有一个“电子邮件或电话”占位符文本,该文本会缩小并移至焦点所在字段的左上角。如何使用 CSS 和/或 JS 实现类似的功能?
问问题
163 次
2 回答
3
首先,欢迎来到 StackOverflow!
它被称为“浮动标签”,它可以通过单独使用 CSS 来实现(如果你不熟悉 :focus 和 :empty 之类的伪选择器,这可能会有点困难)或使用一点 JS ,这可能会更容易一些。
您可以在这里查看一些示例:https ://css-tricks.com/float-labels-css/
于 2018-12-27T15:03:31.370 回答
1
一个简单易行的例子:
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>
于 2018-12-27T15:20:13.917 回答