CSS - :valid偽類

CSS 偽類:valid 用於根據指定規則具有有效內容的<input>或其他<form>元素。它有助於使有效欄位看起來有所不同，從而向用戶確認其資料格式正確。

這對於突出顯示錶單中填寫正確的欄位很有用。

語法

:valid {
   /* css declarations */
 }

CSS :valid 示例

以下示例演示如何使用:valid偽類。

<html>
<head>
<title>Indicating Valid and Invalid Form Fields</title>
<style>
   input:valid {
      border: 2px solid green;
   }
   input:invalid {
      border: 2px solid red;
   }
   input:invalid + span::before {
      content: "Invalid ✖";
      color: red;
  }
  input:valid + span::before {
      content: "Valid ✓";
      color: green;
  }
</style>
</head>
<body>
<form>
<div>
  <label for="name">Name:</label>
  <input type="text" id="name" required>
  <span></span>
  </div>
  <br>
<div>
  <label for="email">Email:</label>
  <input type="email" id="email" required>
  <span></span>
</div>
<br>
<div>
  <label for="password">Password:</label>
  <input type="password" id="password" required>
  <span></span>
</div>
<br>
<div>
  <input type="submit" value="Submit">
  </div>
</form>
</body>
</html>

請注意，當必填文字輸入為空時，則被認為無效，但當填寫正確的內容時，它們會變為有效。

綠色通常用於顯示有效輸入，但患有特定型別色盲的個人可能難以感知它。為了解決這個問題，應該使用額外的指示器（例如描述性文字或符號）來傳達輸入的狀態，而不僅僅依賴顏色。

列印頁面