CSS - 偽類 :optional

CSS 偽類選擇器:optional用於選擇和設定表單元素（如<input>、<select>或<textarea>）的樣式，這些元素不是使用者輸入所必需的，或者可以理解為沒有設定required屬性。

可訪問性問題：當表單列出一些可選的<input>欄位時，應使用required屬性清楚地指示必填欄位。這將有助於使用輔助技術（如螢幕閱讀器）進行導航的使用者理解表單成功提交的必填欄位。

除了required屬性之外，必填欄位還應使用一些描述性文字或圖示進行指示，以便更清楚地傳達所需資訊。

語法

:optional {
   /* ... */ 
}

CSS :optional 示例

這是一個:optional偽類的示例

在以下示例中，:optional偽類應用於未設定required屬性的輸入元素。3px 寬的藍色邊框 CSS 樣式應用於可選的輸入元素。

<html>
<head>
<style>
   label {
      display: block;
      margin: 1px;
      padding: 1px;
   }

   .field {
      margin: 1px;
      padding: 1px;
   }

   input:optional {
      border-color: blue;
      border-width: 3px;
   }

   label.required::after {
      content: "*";
      color: red;
   }

   button {
      background-color: green;
      color: white;
   }

   form {
      border: 3px solid black;
   }
</style>
</head>
<body>
   <form>
      <div class="field">
         <label for="name" class="required">Name:</label>
         <input type="name" id="name" required/>
      </div>
      
      <div class="field">
         <label for="age">Age: (optional)</label>
         <input type="age" id="age" />
      </div>

      <div class="field">
         <label for="feedback">Feedback: (optional)</label>
         <input type="feedback" id="feedback" />
      </div>

      <div class="field">
         <button type="">Submit</button>
      </div>
   </form>
</body>
</html>

列印頁面