如何进行占位符和标签过渡? [英] How do you make Placeholder and Label Transitions?

问题描述

我正在寻找一个示例，该示例如何使标签/占位符过渡向上移动并从占位符位置移至标签位置，反之亦然.

I am looking to find an example of how to make a label / placeholder transition move up and out of placeholder position into a label position and vice versa..

示例: https://www.xero.com/us/signup/

推荐答案

常规同级选择器& :focus以非常简单的方式完成技巧；)

General sibling selectors & :focus does the trick in a very simple way ;)

input{
 position:absolute;
 top:20px;
}
input ~ span{
 transition:top .7s ease;
 position:absolute;
 top:20px;
}
input:focus ~ span{
 top:0px;
}

<label>
<input>
<span>Text</span>
</label>

这是一个包含多个字段的示例

here is an example with multiple fields

https://jsfiddle.net/shLe3107/1/

希望这足够了，只是问问

hope this is enough else just ask

这篇关于如何进行占位符和标签过渡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！