占位符交互
具体效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。
<div class="input-box">
<input class="input-control input-outline" placeholder="账号">
<label class="input-label">账号</label>
</div>首先，让浏览器默认的placeholder效果不可见
.input-control:placeholder-shown::placeholder {
color: transparent;
}第二，使用.input-label元素代替浏览器原声的占位符
.input-box{
position: relative;
}
.input-label {
position: absolute;
left: 16px; top: 14px;
pointer-events: none;
}最后，在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位，效果是缩小并移动到上方
.input-control:not(:placeholder-shown) ~ .input-label,
.input-control:focus ~ .input-label {
color: #2486ff;
transform: scale(0.75) translate(-2px, -32px);
}效果如下：
作者：zhangwinwin 链接：https://juejin.cn/post/6934887428616355847 来源：掘金 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2021-03-04，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读