如何仅用CSS实现input type email的验证（无需JavaScript）

纯CSS完全能搞定这个需求，核心就是利用HTML原生的表单属性+CSS的表单状态伪类，不用一行JavaScript。

第一步：先写基础HTML结构 #

必须给input加上type="email"和required属性，浏览器会自动帮你做邮箱格式的校验：

<label for="user-email">邮箱地址：</label>
<input type="email" id="user-email" required placeholder="example@domain.com">
<p class="email-error">请输入有效的邮箱地址</p>

第二步：用CSS控制验证状态的样式 #

重点用:user-invalid、:valid这些伪类来区分输入状态，同时控制错误提示的显示：

/* 默认隐藏错误提示 */
.email-error {
  display: none;
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 4px;
}

/* 用户交互后输入无效时：红边框+显示错误提示 */
input[type="email"]:user-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}
input[type="email"]:user-invalid ~ .email-error {
  display: block;
}

/* 输入有效时：绿边框（可选，给用户正向反馈） */
input[type="email"]:valid {
  border-color: #198754;
  box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
}

/* 聚焦时的基础样式，覆盖默认outline */
input[type="email"]:focus {
  outline: none;
  border-color: #86b7fe;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

关键知识点解释 #

• type="email"：让浏览器自动校验输入内容是否符合邮箱格式（比如必须包含@和域名部分）
• required：确保输入框不能为空，否则也会触发无效状态
• :user-invalid：这个伪类很重要——它只会在用户和输入框交互过（比如输入后点击别处失焦），且输入无效时才触发，避免页面刚加载就显示错误样式，体验更友好
• 相邻兄弟选择器~：用来关联输入框和后面的错误提示，当输入框状态变化时，自动控制提示的显示隐藏

兼容旧浏览器的备选方案 #

如果需要兼容不支持:user-invalid的旧浏览器（比如部分老版本Chrome/Firefox），可以用:invalid:not(:placeholder-shown)代替，虽然体验稍差，但能实现基本功能：

/* 旧浏览器兼容：用户开始输入但格式不对时显示错误 */
input[type="email"]:invalid:not(:placeholder-shown) {
  border-color: #dc3545;
}
input[type="email"]:invalid:not(:placeholder-shown) ~ .email-error {
  display: block;
}

内容的提问来源于stack exchange，提问作者Omar Díaz