CSS :required伪类是CSS3新增的伪类选择器，专门用于匹配带有required属性的表单输入元素，让开发者可以不用额外添加自定义类名，就能为必填字段设置专属样式，简化表单样式开发的流程。
:required伪类的基本语法
:required伪类的使用非常简单，直接作为选择器的一部分即可，它会对所有设置了required属性的<input>、<textarea>、<select>元素生效。基础的用法示例如下：
/* 为所有必填输入元素添加左侧红色边框 */
input:required, textarea:required, select:required {
border-left: 4px solid #ff4d4f;
padding-left: 8px;
}
/* 为必填的输入框添加背景浅色提示 */
input:required {
background-color: #fffbe6;
}
对应的HTML结构不需要额外的类名，只需要给表单元素添加required属性即可：
<form>
<div>
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="nickname">昵称</label>
<input type="text" id="nickname" name="nickname">
</div>
</form>
常见样式优化场景
1. 添加必填标识
除了边框和背景提示，还可以在必填字段后添加星号标识，结合::after伪元素实现：
/* 为必填字段的label添加星号 */
label:has(+ input:required)::after,
label:has(+ textarea:required)::after,
label:has(+ select:required)::after {
content: " *";
color: #ff4d4f;
font-weight: bold;
}
2. 聚焦状态联动
可以结合:focus伪类，让必填字段在聚焦时有更明显的提示效果：
input:required:focus {
border-left-color: #1677ff;
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.2);
background-color: #fff;
outline: none;
}
3. 无效状态提示
结合:invalid伪类，可以在必填字段未填写时显示错误提示样式：
input:required:invalid {
border-left-color: #ff4d4f;
background-color: #fff2f0;
}
/* 输入框为空且失去焦点时显示提示文本 */
input:required:invalid:not(:focus) {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ff4d4f' viewBox='0 0 16 16'%3E%3Cpath d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z'/%3E%3Cpath d='M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 16px;
}
兼容性说明
:required伪类的兼容性较好，主流现代浏览器都支持该特性，具体兼容情况如下：
| 浏览器 | 支持版本 |
|---|---|
| Chrome | 10及以上 |
| Firefox | 4及以上 |
| Safari | 5及以上 |
| Edge | 12及以上 |
| IE | 不支持 |
如果需要兼容IE浏览器，可以通过JavaScript判断表单元素的required属性，手动添加对应的类名来实现类似效果。
注意事项
- :required伪类只对带有required属性的表单元素生效，动态添加或移除required属性时，样式会自动同步更新。
- 不要和自定义的类名样式冲突，建议优先使用伪类实现基础必填样式，特殊场景再叠加自定义类名。
- 如果表单元素同时有required和disabled属性，:required伪类依然会生效，但可以根据需求用
:disabled伪类覆盖对应样式。
通过合理使用CSS :required伪类，可以大幅减少表单必填字段的样式开发工作量，同时让样式逻辑更清晰，维护起来也更方便。在实际开发中可以根据项目的设计需求，灵活组合其他CSS特性实现更丰富的交互效果。
CSS:required伪类表单样式必填字段修改时间：2026-06-15 10:39:41