占位符交互

具体效果：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题。借助:placeholder-shown伪类就可以只用CSS实现这种效果。

?

1 2 3 4

<div class="input-box">    <input class="input-control input-outline" placeholder="账号">    <label class="input-label">账号</label> </div>

　　

首先，让浏览器默认的placeholder效果不可见

?

1 2 3

.input-control:placeholder-shown::placeholder {     color: transparent; }

第二，使用.input-label元素代替浏览器原声的占位符

?

1 2 3 4 5 6 7 8

.input-box{   position: relative; } .input-label {   position: absolute;   left: 16px; top: 14px;   pointer-events: none; }

 

　　

最后，在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位，效果是缩小并移动到上方

?

1 2 3 4 5

.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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。