如何用css :required制作表单必填提示

在表单设计中，明确标识必填项是提升用户体验的重要一环。CSS 提供的 :required 伪类能够直接选中所有带有 required 属性的表单控件，让我们仅用样式表就能完成基础的必填提示，无需依赖脚本。

什么是 :required 伪类

:required 是 CSS3 引入的一个结构性伪类，用来匹配设置了 required 属性的 input、select、textarea 等表单元素。与之对应的还有 :optional，用于匹配没有 required 的控件。

基础用法示例

下面通过一个简单的注册表单，演示如何使用 :required 给必填项添加红色星号和边框提示。

<form>
  <p>
    <label>用户名</label>
    <input type="text" required />
  </p>
  <p>
    <label>邮箱</label>
    <input type="email" required />
  </p>
  <p>
    <label>昵称</label>
    <input type="text" />
  </p>
  <button type="submit">提交</button>
</form>

对应的 CSS 代码如下，利用 :required 为必填框加红边，并通过相邻兄弟选择器在 label 后插入星号：

/* 必填输入框红色边框 */
input:required {
  border: 2px solid #e74c3c;
}

/* 必填项的 label 后面显示星号 */
label:has(+ input:required)::after {
  content: " *";
  color: #e74c3c;
}

/* 非必填项浅灰边框 */
input:optional {
  border: 1px solid #ccc;
}

使用 :before 与 :after 增强提示

如果希望直接在输入框后显示提示文字，也可以借助包装结构来实现。注意 :before 和 :after 不能直接用于 input 这类替换元素，因此需要外层容器配合。

<div class="field">
  <label>手机号</label>
  <input type="tel" required />
  <span class="tip"></span>
</div>

.field:has(input:required) .tip::before {
  content: "必填";
  color: #e74c3c;
  font-size: 12px;
}

兼容性与注意事项

现代浏览器均支持 :required 与 :optional。但在旧版 IE 中不可用。若项目需要兼容老浏览器，可同时用 JavaScript 添加 class 作为降级方案。

• :required 只匹配具有 required 属性的元素，动态移除该属性后样式自动失效
• 伪类不增加 HTML 复杂度，便于维护
• 可结合 :invalid 做更完整的校验样式

小结

使用 css :required 制作表单必填提示是一种轻量、优雅的方案。通过合理的选择器和伪元素，可以在不写一行 JS 的情况下，清晰传达填写要求，让表单更友好。

css:requiredform_validation修改时间：2026-07-30 12:24:17