:optional

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

尝试一下

这个伪类很有用，可以为不是必须提交的表单字段设置样式。

备注： :required 伪类选择必填表单字段

语法

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

示例

可选字段具有紫色边框

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;
}

结果

无障碍考虑

如果表单包含可选的 <input>，则应该使用 required 属性来指示必填输入。这将确保使用辅助技术（例如屏幕阅读器）导航的人能够了解哪些输入需要有效内容以确保成功提交表单。

此外，还应在视觉上指示必填输入，通常使用描述性文本和/或图标，以避免仅依赖于颜色来传达含义。

规范

Specification
HTML Standard
# selector-optional
Selectors Level 4
# opt-pseudos

浏览器兼容性

BCD tables only load in the browser

参见