placeholder-shown

通常咱們常見placeholder僞類選擇器用來修改默認樣式及文案，突然發現placeholder-shown僞類選擇器，比較官方的解釋是

 CSS僞類表示任何顯示佔位符文本的form元素。

簡單來講就是當輸入框的placeholder內容顯示的時候，輸入框幹嗎幹嗎。

兼容性以下，在移動端沒什麼問題，主要是ie

用這個咱們能夠實現下面動效

具體代碼以下

Html

<div class="input">
    <input class="input-fill" placeholder="郵箱">
    <label class="input-label">郵箱</label>
</div>

Css

.input{ position: relative; } .input-fill{ border: 1px solid #ececec; outline: none; padding: 13px 16px 13px; font-size: 16px; line-height: 1.5; width: fit-content; border-radius: 5px; } .input-fill:placeholder-shown::placeholder { color: transparent; } .input-label { position: absolute; font-size: 16px; line-height: 1.5; left: 16px; top: 14px; color: #a2a9b6; padding: 0 2px; transform-origin: 0 0; pointer-events: none; transition: all .25s; } .input-fill:focus{ border: 1px solid #2486ff; } .input-fill:not(:placeholder-shown) ~ .input-label, .input-fill:focus ~ .input-label { transform: scale(0.75) translate(0, -32px); background-color: #fff; color: #2486ff; }