: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 属性，不验证实际输入内容
