輸入框不為空的CSS屬性是在用戶輸入內容后,將輸入框的外觀樣式變化,以提示用戶輸入已提交或輸入正確。
input:not(:placeholder-shown) { border-color: green; }
上述代碼意思是,當輸入框內有內容時,將邊框顏色改為綠色。
也可以結合偽類選擇器:valid和:invalid使用。
input:valid { border-color: green; } input:invalid { border-color: red; }
當輸入框內的內容合法時,將邊框顏色改為綠色,否則改為紅色。
除了改變邊框顏色外,還可以改變背景色、字體顏色等樣式,以實現更豐富的提示效果。
input:not(:placeholder-shown){ background-color: #f7f7f7; color: green; }
上述代碼意思是,當輸入框內有內容時,將背景色改為淡灰色,字體顏色改為綠色。這樣做的好處是不會影響用戶輸入時的輸入提示,但又能清晰的提示用戶輸入正確。
以上是一些常見的“輸入框不為空”CSS屬性,其中對empty空值的判斷可通過:not(:placeholder-shown)。這些屬性和方法不僅在網頁的表單、登錄注冊等方面使用廣泛,也可以在其他需要用戶輸入信息時有效提醒用戶。