简介

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

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

语法

--------- -
  -- ---- --
-

用法

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

------
  ------ ----------------------
  ------ ----------- ----------- ---------

  ------ -------------------------
  ------ ------------ ------------ ---------

  ------ ------------- -----------
-------

--------- -
  ------- --- ----- ----
-

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

浏览器支持

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

• Chrome
• Firefox
• Safari
• Edge
• Opera

示例

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

突出显示空字段

----------------- -
  ----------------- --------
-

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

提供错误消息

----------------- - ------ -
  -------- ------
-

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

禁用提交按钮

----------------- - -------------------- -
  --------- -----
-

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

注意

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

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