input输入框占位符变化：输入框处于聚焦状态时，输入框的占位符内容以动画形式移动到左上角作为标题
1<div class="input-box">
2 <input class="input-control input-outline" placeholder="账号">
3 <label class="input-label">账号</label>
4</div>
首先：让浏览器默认的placeholder效果不可见
1.input-control:placeholder-shown::placeholder {
2 color: transparent;
3}
其次：使用.input-label元素代替浏览器原声的占位符
1.input-box{
2 position: relative;
3}
4.input-label {
5 position: absolute;
6 left: 16px; top: 14px;
7 pointer-events: none;
8}
最后，在输入框聚焦以及占位符不显示的时候对<label>元素进行重定位，效果是缩小并移动到上方
1.input-control:not(:placeholder-shown) ~ .input-label,
2.input-control:focus ~ .input-label {
3 color: #2486ff;
4 transform: scale(0.75) translate(-2px, -32px);
5}
除另有声明外，本博客文章均采用 知识共享 (Creative Commons) 署名 4.0 国际许可协议 进行许可。转载请注明原作者与文章出处。