css :optional与:required区分表单字段

:required 和 :optional 伪类通过样式区分必填与选填字段，input:required 设置红色边框突出必填项，input:optional 降低透明度弱化可选字段，结合使用可提升表单可读性和用户体验。

在表单设计中，CSS 的 :optional 和 :required 伪类用于区分用户是否必须填写某个字段。它们帮助开发者通过样式直观地表达字段的必填状态，提升用户体验。

:required 伪类

匹配所有设置了 required 属性的表单元素，表示该字段为必填项。

• 常用于 input、select、textarea 等表单控件
• 浏览器在提交表单时会阻止未填写的 required 字段，并提示用户
• 可用于添加视觉提示，比如红色边框或星号样式

示例：

input:required {
  border-left: 3px solid #e00;
}

:optional 伪类

匹配没有 required 属性的表单字段，即选填项。

• 默认情况下大多数表单字段是 optional 的
• 可用于弱化非必填项的外观，使其与必填项形成对比
• 对可选上传、备注等字段特别有用

示例：

input:optional {
  opacity: 0.7;
  background-color: #f9f9f9;
}

实际应用技巧

结合使用这两个伪类，可以让表单结构更清晰。

• 用颜色、边框或阴影突出必填字段
• 为 optional 字段添加轻微背景色，降低视觉权重
• 配合 ::before 或 ::after 生成内容（如“*”）标注 required 字段
• 注意：这些伪类只依赖 HTML 属性，不验证实际输入内容

基本上就这些。合理使用 :required 和 :optional 能让表单更易理解，减少用户填写错误。