如何使用CSS :required 伪类标记必填表单字段？-css教程-PHP中文网

:required伪类仅匹配原生表单控件中显式声明required属性的元素，即（含text、email、checkbox等）、、；不匹配、等非验证型元素或自定义组件。

如何使用css :required 伪类标记必填表单字段？

:required 伪类能直接匹配带 required 属性的表单控件，但仅作用于原生支持该属性的元素（<input>、<select></select>、<textarea></textarea>），对自定义组件或 JS 动态添加的 required 属性无效。

哪些元素能被 `:required` 匹配？

只有浏览器原生识别 required 属性的表单控件才触发该伪类：

<input type="text" required> ✅
<input type="email" required> ✅
<input type="checkbox" required> ✅（勾选才算通过验证）
<select required></select> ✅（需有非空 value 的 <option></option> 且未设 selected）
<textarea required></textarea> ✅
<input type="hidden" required> ❌（不渲染，:required 不生效）
<div contenteditable="true" required> ❌（非表单控件，<code>required 属性无语义）
常见样式误用与修复

开发者常以为加个红色星号就完事，但实际容易忽略可访问性与交互反馈：

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载
- 仅用 ::after 添加 * 而不包裹在 <label></label> 内 → 屏幕阅读器无法关联必填提示
- 写成 input:required + label::before { content: "*"; color: red; } → 选择器错误，+ 是相邻兄弟，而 label 通常在 input 前面或外层
- 用 input:required:focus { outline: 2px solid #007bff; } → 焦点样式应统一管理，不要仅限 :required，否则非必填字段焦点状态不一致
推荐写法（语义+视觉兼顾）：
```
label.required::after,
label > input:required ~ span::before {
  content: " *";
  color: #d32f2f;
  font-size: 0.9em;
}
/* 同时确保 label 正确 for 关联 input */
label[for="name"] input:required { /* 可选：微调输入框边框 */ border-color: #d32f2f; }
```
:required 与 JavaScript 验证逻辑是否同步？

不自动同步。DOM 中移除 required 属性后，:required 样式立即消失；但 JS 若用 setCustomValidity() 手动设错，不会影响 :required 的匹配状态。
- 动态增删 required 必须用 element.setAttribute("required", "") 或 removeAttribute("required")，不能只改 element.required = true（后者只影响 JS API，不触发伪类）
- 服务端返回字段必填规则变化时，前端需显式操作 DOM 属性，而非仅靠 JS 控制逻辑
- :required 不代表“当前必须校验”，它只是静态属性存在与否的快照 —— 比如一个 type="date" 字段即使为空，:required 仍匹配，但用户未聚焦前不会显示浏览器默认错误提示
真正容易被忽略的是：当表单使用 Shadow DOM 封装（比如 Web Components），:required 在宿主样式中无法穿透到内部 input，必须在组件内部样式或 ::slotted(input:required) 中定义 —— 这一点连很多现代 UI 库文档都没强调清楚。