使用css的:required伪类可为表单必填字段添加视觉提示。1. 通过html的required属性标记必填项，CSS的:required伪类选中这些元素。2. 用:required设置边框、背景色等样式提升可读性。3. 结合::after与:has()在label旁添加红色星号标识，或直接在HTML中写入兼容性更好。4. 利用:invalid和:valid区分未填与已正确填写的字段，分别显示红绿边框。通过简单CSS即可实现清晰的表单反馈，关键是保持样式一致，明确提示用户必填项及其状态。

使用 CSS 的 :required 伪类可以轻松为表单中必填字段添加视觉提示，让用户一眼看出哪些是必须填写的项。不需要 javaScript，纯 CSS 就能实现清晰的用户体验。

1. 识别必填字段

HTML 表单中，通过给输入元素添加 required 属性来标记必填项。CSS 的 :required 伪类会自动选中这些元素。

示例：

<form>   <label>姓名：<input type="text" name="name" required></label>   <label>邮箱：<input type="email" name="email" required></label>   <label>电话：<input type="tel" name="phone"></label> </form> 

2. 添加视觉样式

利用 :required 给必填项加边框、背景色或提示符号，提升可读性。

立即学习“前端免费学习笔记（深入）”；

常用样式示例：

input:required {   border-left: 3px solid #ff6b6b;   background-color: #fff9f9; } <p>input:required:focus { outline: 1px solid #ff4757; } 

3. 显示“必填”标识（如星号）

结合 ::before 或 ::after 伪元素，在标签旁动态添加星号等提示符。

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

74

查看详情

前提：给 label 或 input 添加对应结构支持。例如：

<label class="required-field">邮箱地址</label> <input type="email" required> 

CSS 实现星号：

label.required-field:has(input:required)::after {   content: " *";   color: red;   font-weight: bold; } 

注意：:has() 是较新的选择器，现代浏览器支持良好，但需注意兼容性。

若不使用 :has()，也可直接写：

input:required + label::after {   /* 注意顺序调整 */ } 

更稳妥做法：将提示符直接写在 HTML 中，用 CSS 控制显示，兼顾兼容性。

4. 区分已填写与未填字段

结合 :valid 和 :invalid，进一步优化反馈。

• 未填的 required 字段：红色边框
• 已正确填写：绿色边框

input:required:invalid {   border-color: #ff6b6b; } <p>input:required:valid { border-color: #51cf66; } 

基本上就这些。用 :required 配合简单 CSS，就能让表单更易用。关键是保持样式一致，让用户清楚知道哪里必须填，填得对不对。不复杂但容易忽略细节。

以上就是如何用