在移動端，如果標籤和輸入框在一行中顯示，顯示的有點窄。
如果標籤和輸入框各佔一行顯示，又浪費空間。有沒有兩全其美的方案呢？
Material Design 提供了一個兩全其美的方案。輸入框沒有值時，標籤在輸入框中顯示。在輸入框中有值或獲得焦點時，標籤在上方顯示。如下圖所示:
解決方案
可以用 CSS 的 :placeholder-shown 僞類可以實現上面的效果。:placeholder-shown 作用於顯示佔位符時的元素。輸入框在有值或獲得焦點時，不顯示佔位符，可以用選擇器 :not(:placeholder-shown) 匹配。下面是具體是實現：
HTML 結構:
<div class="input-fill-x">
<input class="input-fill" placeholder="name">
<label class="input-label">name</label>
</div>
第 1 步 隱藏瀏覽器默認的 placeholder。
.input-fill:placeholder-shown::placeholder {
color: transparent;
}
第 2 步 設置: 輸入框顯示佔位符時的樣式。
.input-fill-x {
position: relative;
}
.input-label {
position: absolute;
left: 16px; top: 14px;
pointer-events: none;
}
第 3 步 設置: 輸入框不顯示佔位符(即獲得焦點或有值)時的樣式。
.input-fill:not(:placeholder-shown) ~ .input-label,
.input-fill:focus ~ .input-label {
transform: scale(0.75) translate(0, -32px);
}
完成~
:placeholder-shown 的兼容性很好。
在項目中用起來吧~
覺得本文對你有幫助。點個贊，分享給小夥伴們吧~