CSS 伪类

CSS 伪类 :optional 在选择和设置表单元素样式时很有用，例如 <input>、<select> 或 <textarea>，这些元素对于用户输入不是必需的或强制的，或者您可以说没有设置必需的属性。

可访问性问题:当表单列出一些可选的 <input> 字段时，它应该使用 required 属性清楚地指示必填字段。这对于那些使用辅助技术（例如屏幕阅读器）进行导航的人来说将很有帮助，以了解成功提交表单所需的字段。

除了必填属性之外，强制字段还应该使用一些描述性文字或图标来表示，以便更清楚地传达所需信息。

语法

:optional {
   /* ... */ 
}

CSS :optional 示例

这是 :optional  的示例:

在下面的示例中，:optional 伪类应用于未给定必需属性的输入元素。 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">名字:</label>
         <input type="name" id="name" required/>
      </div>
      
      <div class="field">
         <label for="age">年龄: (可选)</label>
         <input type="age" id="age" />
      </div>

      <div class="field">
         <label for="feedback">建议: (可选)</label>
         <input type="feedback" id="feedback" />
      </div>

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