使用css伪类:required和:optional可直观区分表单必填与可选字段。通过为必填项添加红色边框、背景色或星号标记，如input:required{border-left:3px solid #e74c3c}，提升视觉提示；对可选字段设置半透明或虚线边框，如input:optional{opacity:0.8;border:1px dashed #ccc}，降低权重。结合::after伪元素可为必填项动态添加*号，增强可访问性。两者搭配无需javaScript即可优化表单结构识别，提高填写效率。
在Web表单设计中，使用CSS伪类 :required 和 :optional 可以帮助开发者为用户更直观地展示哪些字段是必填的，哪些是可选的，从而提升用户体验和表单填写效率。
:required 伪类
该伪类用于匹配设置了 required 属性的表单元素。浏览器会强制这些字段必须填写，否则无法提交表单。利用 :required，可以为必填项添加视觉提示，比如边框颜色、背景色或添加星号标记。
- 适用于 input、textarea、select 等表单控件
- 只要元素带有 required 属性，就会被匹配
- 常用于高亮必填字段
示例：
input:required { border-left: 3px solid #e74c3c; background-color: #fdf2f2; }
:optional 伪类
与 :required 相反，:optional 匹配那些没有设置 required 属性的表单字段。它适用于希望对“可选字段”进行样式区分的场景，比如降低其视觉权重。
立即学习“前端免费学习笔记（深入）”；
- 自动匹配未声明 required 的输入框
- 有助于统一可选字段的外观
- 在复杂表单中增强可读性
示例：
input:optional { opacity: 0.8; border: 1px dashed #ccc; }
结合使用提升可访问性
将这两个伪类搭配使用，可以让用户快速识别表单结构。例如，用红色边框突出必填项，用浅色虚线框表示可选项，减少用户困惑。
还可以配合 ::after 或 ::before 伪元素为必填项动态添加“*”标识：
input:required::after { content: " *"; color: #e74c3c; font-size: 1.2em; }
注意：content 仅对支持伪元素的输入类型有效（如不推荐用于 input[type=”text”]，更适合标签或占位提示）。
基本上就这些。合理使用 :required 和 :optional 能让表单更清晰，无需javascript即可实现基础的视觉反馈。不复杂但容易忽略。