最直接且推荐的方式是使用css的:required伪类，它能选中带有required属性的表单元素并为其设置样式，结合:invalid、:valid、:focus等伪类可提供动态视觉反馈，通过边框颜色、背景色变化及星号提示等方式让用户清晰识别必填项，同时需注意保持样式简洁、确保颜色对比度、配合aria-required提升无障碍性，并辅以javascript处理复杂验证逻辑，从而全面提升表单填写体验。
在HTML中，要给必填字段设置样式，最直接且推荐的方式就是利用CSS的
:required
伪类。这个伪类专门用来选中那些带有
required
属性的表单元素，让你能轻松地为它们定义视觉上的反馈，告诉用户“这里必须填”。
<form> <label for="username">用户名:</label> <input type="text" id="username" name="username" required> <label for="email">邮箱:</label> <input type="email" id="email" name="email" required> <label for="message">留言:</label> <textarea id="message" name="message" required></textarea> <label for="country">国家:</label> <select id="country" name="country" required> <option value="">请选择</option> <option value="cn">中国</option> <option value="us">美国</option> </select> <button type="submit">提交</button> </form> <style> /* 基础样式，让必填项更醒目 */ input:required, textarea:required, select:required { border: 1px solid #ccc; /* 默认边框 */ background-color: #f9f9f9; padding: 8px; border-radius: 4px; transition: border-color 0.3s ease, background-color 0.3s ease; } /* 当必填项获得焦点时 */ input:required:focus, textarea:required:focus, select:required:focus { border-color: #007bff; /* 焦点时蓝色边框 */ box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25); outline: none; /* 移除默认焦点轮廓 */ } /* 当必填项内容无效时（例如，未填写） */ input:required:invalid, textarea:required:invalid, select:required:invalid { border-color: #dc3545; /* 红色边框表示无效 */ background-color: #fff0f0; /* 浅红色背景 */ } /* 当必填项内容有效时 */ input:required:valid, textarea:required:valid, select:required:valid { border-color: #28a745; /* 绿色边框表示有效 */ background-color: #f0fff0; /* 浅绿色背景 */ } /* 针对placeholder显示时，必填项的提示 */ input:required:placeholder-shown { /* 比如，可以在placeholder显示时给一个轻微的背景色提示 */ background-color: #fdfdfd; } /* 样式化必填项前的星号提示 */ label:has(+ input[required])::after, label:has(+ textarea[required])::after, label:has(+ select[required])::after { content: " *"; color: #dc3545; margin-left: 4px; } </style>
深入理解：
required
required
属性与
:required
伪类的工作机制
required
属性是HTML5引入的一个布尔属性，它能应用于
<input>
,
<select>
,
<textarea>
等表单元素上。它的作用非常直接：告诉浏览器，这个表单字段在提交前必须有值。如果用户尝试提交一个未填写必填项的表单，浏览器会阻止提交，并显示一个默认的错误提示（通常是工具提示形式）。
而CSS的
:required
伪类，则是专门用来“捕捉”这些带有
required
属性的元素。它的工作机制就是基于这个属性的存在。只要一个表单元素被标记为
required
，
:required
伪类就能选中它，无论它当前是否有值、是否处于焦点状态。这意味着你可以为所有必填字段设置统一的默认样式，比如一个特定的边框颜色或者背景色，让用户一眼就能识别出哪些是必填项。
立即学习“前端免费学习笔记（深入）”；
浏览器对
required
属性的默认行为是，在表单提交时进行客户端验证。如果必填项为空，它会阻止提交并提示用户。
:required
伪类只是样式层面的反映，它本身不参与验证逻辑，但它能极大地增强验证的用户体验。通过视觉上的反馈，用户在填写过程中就能知道哪些字段是必须填的，而不是等到提交时才发现。
提升用户体验：结合其他伪类增强必填项反馈
仅仅给必填项一个静态的样式可能还不够。一个好的用户体验，在于提供动态、即时的反馈。我们可以将
:required
与其他CSS伪类结合起来，创建更细致、更智能的样式。
一个很常见的场景是：当必填项为空（即无效状态）时，给予强烈的视觉警告。CSS的
:invalid
伪类就派上用场了。
:invalid
会选中所有当前内容不符合其类型或
required
规则的表单元素。所以，
input:required:invalid
就能精确地选中那些“必填但未填”或者“必填但格式不对”的输入框。你可以给它们设置一个醒目的红色边框或背景，明确告诉用户这里有问题。
/* 必填项无效时的样式，通常是未填写或格式错误 */ input:required:invalid { border-color: #dc3545; /* 红色边框 */ background-color: #fff0f0; /* 浅红色背景 */ box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.25); /* 红色阴影 */ } /* 必填项有效时的样式，用户已经填写且格式正确 */ input:required:valid { border-color: #28a745; /* 绿色边框 */ background-color: #f0fff0; /* 浅绿色背景 */ } /* 当必填项获得焦点且处于无效状态时 */ input:required:invalid:focus { border-color: #c82333; /* 更深的红色 */ box-shadow: 0 0 0 0.2rem rgba(200, 35, 51, 0.3); }
此外，我们还可以考虑
:focus
伪类。当用户点击或Tab到必填项时，
:focus:required
可以给它一个特别的焦点样式，比如更粗的边框或不同的背景色，引导用户的注意力。
另一个不那么常用但有时很巧妙的组合是
:placeholder-shown
。这个伪类在输入框的
placeholder
文本可见时生效。如果你想在用户还没开始输入时，就给必填项一个轻微的视觉提示，并且这个提示只在placeholder显示时（即输入框为空时）出现，那么
input:required:placeholder-shown
就很有用。比如，给它一个淡淡的背景色，当用户开始输入，placeholder消失后，背景色也随之消失。
这些组合拳的目的是为了让用户在整个表单填写过程中，都能得到清晰、即时的反馈，从而减少错误，提升完成度。
使用
:required
:required
样式时的常见挑战与进阶技巧
在使用
:required
伪类时，虽然它很方便，但也有一些值得注意的地方和可以进一步优化的空间。
一个常见的挑战是过度设计。有些开发者可能会给
:required
元素设置过于花哨或过于强烈的样式，反而分散了用户的注意力，甚至影响了可读性。例如，过粗的边框、过于鲜艳的背景色，或者复杂的动画，都可能适得其反。样式应该起到辅助和引导的作用，而不是喧宾夺主。保持简洁、直观是关键。
另一个需要理解的点是，
:required
伪类仅仅是CSS层面上的样式控制。它依赖于HTML的
required
属性进行客户端验证。但对于更复杂的验证逻辑（比如密码强度、邮箱格式的自定义规则、后端验证），你仍然需要JavaScript和可能的后端逻辑来配合。CSS的
:required
和
:invalid
能提供即时视觉反馈，但不能替代全面的验证策略。
在进阶技巧方面：
-
语义化提示： 除了视觉样式，别忘了在
label
标签旁边添加一个明确的星号
*
或“必填”字样。这可以通过CSS的
::after
伪元素结合
label:has(+ input[required])
等选择器实现，确保即使CSS加载失败，用户也能通过文本提示了解哪些是必填项。
-
动态提示： 考虑使用CSS变量来管理必填项的颜色。这样，如果你的品牌色或错误提示色发生变化，只需要修改一个CSS变量，所有相关的必填项样式都会随之更新，维护起来会方便很多。
-
:optional
伪类： 与
:required
相对的是
:optional
伪类，它选中那些没有
required
属性的表单元素。你可以利用它来为可选字段设置不同的样式，比如更柔和的边框或背景，进一步区分必填和可选字段，提升表单的视觉层次感。
-
无障碍性（Accessibility）： 确保你为必填项设置的颜色对比度足够高，以便色盲或视力障碍用户也能区分。同时，考虑使用
aria-required="true"
属性，虽然
required
属性本身已经提供了语义，但显式添加
aria-required
可以增强屏幕阅读器的识别能力。
总之，
:required
伪类是一个强大而实用的工具，它让前端开发者能够以更直观、更用户友好的方式来处理表单的必填项。但要真正发挥其价值，还需要结合其他CSS特性，并从整体的用户体验和无障碍性角度去考量。
评论（已关闭）
评论已关闭