CSS 判斷 Input 不為空

input:focus:invalid {
box-shadow: none;
outline-width: 0;
outline-style: none;
border-color: red;
}
input:valid {
border-color: green;
}

在上述代碼中，我們使用了 CSS 的 :valid 偽類和 :invalid 偽類來(lái)判斷 Input 是否為空。當(dāng) Input 為空時(shí)，會(huì)觸發(fā) :invalid。我們可以通過(guò)設(shè)置 :invalid 時(shí)的樣式來(lái)給用戶提示，標(biāo)紅輸入框邊框等。而當(dāng)用戶開(kāi)始輸入內(nèi)容時(shí)，Input 內(nèi)容不為空，就會(huì)觸發(fā) :valid。我們可以設(shè)置相應(yīng)的樣式來(lái)提示用戶輸入正確，比如變綠輸入框邊框。