我希望找到一个示例,说明如何使标签/占位符转换向上移动并从占位符位置移动到标签位置,反之亦然。
答案 0 :(得分:3)
General sibling selectors& :focus
以非常简单的方式完成诀窍;)
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>
这是一个包含多个字段的示例
https://jsfiddle.net/shLe3107/1/
希望这还不错,只需要问一下
答案 1 :(得分:1)
我找到了一个很好的Codepen,展示了如何在CSS中实现它。
HTML:
<div class="row">
<input id="name" type="text" name="name">
<label for="name">Full Name</label>
</div>
CSS:
.row {
position: relative;
margin-top: 35px;
}
input {
display: block;
padding: 8px 12px;
width: 100%;
max-width: 300px;
border-radius: 5px;
border: 0;
}
label {
position: absolute;
font-weight: 600;
color: #777777;
top: 50%;
left: 12px;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
cursor: text;
user-select: none;
transition: 0.15s ease-in-out;
}
input[data-empty="false"] + label,
input:valid + label,
input:focus + label {
top: -10px;
left: 0px;
font-size: 10px;
color: #ffffff;
}