简介

:required 选择器用于匹配表单中具有 required 属性的元素。当表单元素为必填项时，可以使用此选择器来应用特定样式，例如：

• 突出显示空字段
• 提供错误消息
• 禁用提交按钮，直到所有必需字段都已填写

语法

:required {
  /* 样式规则 */
}

用法

要使用 :required 选择器，只需将其应用于要样式化的表单元素即可。例如：

// www.javascriptcn.com code example
<form>
  <label for="name">姓名：</label>
  <input type="text" name="name" required>

  <label for="email">电子邮件：</label>
  <input type="email" name="email" required>

  <input type="submit" value="提交">
</form>

:required {
  border: 1px solid red;
}

这将使所有必需的表单字段都带有红色边框。

浏览器支持

:required 选择器得到所有现代浏览器的广泛支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

示例

以下是使用 :required 选择器的一些示例：

突出显示空字段

:required:invalid {
  background-color: #ffcccc;
}

这将使所有必需的空字段都带有浅红色背景。

提供错误消息

:required:invalid ~ .error {
  display: block;
}

这将显示具有 error 类的错误消息，当必需的字段为空时。

禁用提交按钮

:required:invalid ~ input[type="submit"] {
  disabled: true;
}

这将禁用提交按钮，直到所有必需字段都已填写。

注意

:required 选择器仅适用于具有 required 属性的表单元素。对于其他类型的元素，它不会有任何效果。

此外，:required 选择器不会影响表单元素的验证。它仅用于应用样式。有关表单验证的更多信息，请参阅 HTML required 属性或 JavaScript validity 属性。