:placeholder-shown CSS 伪类 在
<input>或<textarea>元素显示 placeholder text 时生效.
<div class="input-fill-x">
<input class="input-fill" placeholder="邮箱">
<label class="input-label">邮箱</label>
</div>
/* 默认placeholder颜色透明不可见 */
.input-fill:placeholder-shown::placeholder {
color: transparent;
}
.input-fill-x {
position: relative;
}
.input-label {
position: absolute;
left: 16px; top: 14px;
pointer-events: none;
}
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
transform: scale(0.75) translate(0, -32px);
}