:user-valid
:user-valid CSS 偽類表示任何經過驗證的表單元素，其值根據其驗證約束正確驗證。但是，與:valid不同，它僅在使用者與之互動後才匹配。
如果表單控制元件有效且發生以下任何情況，則應用此偽類：
- 使用者對錶單控制元件進行了更改並提交了更改，例如透過將焦點移到其他位置。
- 使用者已嘗試提交表單，即使未對控制元件進行任何更改。
- 當控制元件獲得焦點時，其值無效，並且使用者進行了更改使其有效，即使焦點仍在控制元件中。
一旦應用此偽類，當控制元件獲得焦點時，使用者代理會在每次按鍵時重新驗證控制元件是否有效。
- 如果控制元件具有焦點，並且當它獲得焦點時其值無效，則在每次按鍵時重新驗證。
結果是，如果使用者開始與控制元件互動時控制元件是有效的，則只有當用戶將焦點轉移到另一個控制元件時，有效性樣式才會改變。但是，如果使用者試圖糾正先前標記的值，則當值變為有效時，控制元件會立即顯示。必填項僅在使用者更改它們或嘗試提交未更改的無效值時才被標記為無效。
語法
css
:user-valid {
/* ... */
}
示例
在 :user-valid 上設定顏色和符號
在以下示例中，綠色邊框和 ✅ 僅在使用者與該欄位互動後才顯示。嘗試將電子郵件地址更改為另一個有效的電子郵件，以檢視其效果。
html
<form>
<label for="email">Email *: </label>
<input
id="email"
name="email"
type="email"
value="test@example.com"
required />
<span></span>
</form>
css
input:user-valid {
border: 2px solid green;
}
input:user-valid + span::before {
content: "✓";
color: green;
}
規範
| 規範 |
|---|
| HTML # selector-user-valid |
| 選擇器 Level 4 # user-valid-pseudo |
瀏覽器相容性
載入中…