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>

打印页面