CSS美化必填字段，结合JS实现提示效果

CSS 的 `:required` 伪类是提升表单可用性的轻量级利器，无需 JavaScript 即可直观标识必填字段——通过结合 `required` HTML 属性与纯 CSS 样式（如红色边框、浅红背景、动态星号提示），甚至联动 `:invalid`/`:valid` 实时反馈填写状态，就能在不增加复杂度的前提下，显著增强用户对必填项的感知和操作信心；文章不仅详解了现代方案（如 `:has()` 配合 `::after` 添加星号），也兼顾兼容性建议，让开发者能灵活选择最适合项目需求的实现方式。

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

1. 识别必填字段

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

示例：

<form>
  <label>姓名：&lt;input type=&quot;text&quot; name=&quot;name&quot; required&gt;</label>
  <label>邮箱：&lt;input type=&quot;email&quot; name=&quot;email&quot; required&gt;</label>
  <label>电话：&lt;input type=&quot;tel&quot; name=&quot;phone&quot;&gt;</label>
</form>

2. 添加视觉样式

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

常用样式示例：

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

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

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

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

<label class="required-field">邮箱地址</label>
&lt;input type=&quot;email&quot; required&gt;

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;
}
</p>

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。