:可选

**:optional** CSS 伪类 表示任何没有设置 required 属性的 <input>、<select> 或 <textarea> 元素。

试试看

此伪类可用于设置不需要提交表单的字段的样式。

**注意：** :required 伪类选择必需的表单字段。

语法

css
:optional {
  /* ... */
}

无障碍访问

如果 表单 包含可选的 <input>，则应使用 required 属性指示必需的输入。这将确保使用屏幕阅读器等辅助技术的用户能够理解哪些输入需要有效内容才能确保成功提交表单。

还应以视觉方式指示必需的输入，使用不完全依赖颜色来传达含义的处理方式。通常，使用描述性文本和/或图标。

示例

可选字段具有紫色边框

HTML

html
<form>
  <div class="field">
    <label for="url_input">Enter a URL:</label>
    <input type="url" id="url_input" />
  </div>

  <div class="field">
    <label for="email_input">Enter an email address:</label>
    <input type="email" id="email_input" required />
  </div>
</form>

CSS

css
label {
  display: block;
  margin: 1px;
  padding: 1px;
}

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

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

结果

规范

规范
HTML 标准
# selector-optional
选择器级别 4
# opt-pseudos

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅