:可选

The :可选 伪类针对未明确设置为 required （没有 required 属性）的输入（包括 <select>）。

当您想让可选字段具有特定外观时，这很有用，例如，可选字段可能比必填字段的可见度略低。

语法

input[type=text]:optional {
  border: 1px solid #eee;
}

演示

在以下演示中，可选字段（“姓名”、“性别”和“洲”）的透明度降低到 40%，以便用户可以立即知道哪些是必填字段。 在这种情况下，是“电子邮件”。 当悬停时，可选输入的透明度将恢复到 100%。

The optional 适用于所有类型的表单元素：所有类型的文本输入、单选按钮、复选框和选择框。

注意：您无法仅通过 CSS 知道标签是否与可选字段相关联，除非标签位于输入之后（并且您使用兄弟组合器），这很罕见，通常不是一个好主意。 也许将来父选择器可以对此有所帮助。

浏览器支持

Chrome	Safari	Firefox	Opera	IE	Android	iOS
10+	5+	4+	10+	10+	任何	5+

注意 :可选 与 :not(:required) 并不完全相反，因为后者将匹配所有类型的元素，而 :可选 仅限于表单元素。

更多信息

• 选择器级别 4
• MDN 文档

相关