使用:required伪类可为必填表单元素设置样式，如红色边框input:required{border:2px solid #e53935}，结合:focus和::placeholder增强提示，再通过input:not(:required){border:1px solid #ccc}弱化可选字段，提升表单可用性。
在CSS中，可以使用 :required 伪类来选中设置了 required 属性的表单元素，比如输入框、文本域等。通过结合该伪类，我们可以为必填字段设置特定样式，例如边框颜色或背景色，帮助用户快速识别哪些是必须填写的项目。
使用 :required 伪类的基本语法
:required 会匹配所有带有 required 属性的表单控件。常见元素包括 、 和 。
input:required,
textarea:required,
select:required {
border: 2px solid #e53935;
outline: none;
}
增强视觉提示：结合:focus 或 ::placeholder
为了让用户体验更好，可以在用户聚焦到必填字段时进一步突出显示，或者修改占位符文字的颜色。
示例：聚焦时加深边框，并调整占位符颜色input:required:focus {
border-color: #b71c1c;
box-shadow: 0 0 4px rgba(229, 57, 53, 0.4);
}
input:required::placeholder {
color: #ef9a9a;
opacity: 0.8;
}
区分可选与必填字段
为了更清晰地区分，也可以为非必填项设置较浅的边框，让必填项更加显眼。
立即学习“前端免费学习笔记（深入）”；
示例：可选字段使用浅灰色边框input:not(:required),
textarea:not(:required) {
border: 1px solid #ccc;
}
这样设计后，页面上的必填字段会因更明显的边框颜色和粗细脱颖而出，提升表单的可用性。
基本上就这些。不复杂但容易忽略。
