简介

:invalid 选择器用于选择表单元素，当其值无效时。这使得您可以为无效的表单元素应用样式，例如突出显示错误或提供反馈。

语法

:invalid 选择器的语法如下：

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

使用示例

以下示例将红色边框应用于无效的文本输入元素：

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

您还可以使用 :invalid 选择器来应用其他样式，例如更改背景颜色或显示错误消息：

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

支持的元素

:invalid 选择器支持以下表单元素：

• <input>
• <select>
• <textarea>

浏览器支持

:invalid 选择器在所有现代浏览器中都得到很好的支持，包括：

• Chrome
• Firefox
• Safari
• Edge
• Opera

用例

:invalid 选择器可以用于各种用例，包括：

• 突出显示无效的表单字段
• 提供有关无效输入的反馈
• 验证表单输入
• 改善用户体验

注意事项

以下是一些使用 :invalid 选择器时的注意事项：

• :invalid 选择器仅适用于表单元素。
• :invalid 选择器不会选择空值。
• :invalid 选择器不会选择具有 required 属性的元素，即使它们无效。
• :invalid 选择器优先于其他选择器。例如，以下样式将为所有输入元素应用红色边框，即使它们是有效的：

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

替代方案

如果您需要支持不支持 :invalid 选择器的旧浏览器，可以使用 JavaScript 来验证表单输入并应用样式。以下示例使用 JavaScript 来突出显示无效的文本输入元素：

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

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

结论

:invalid 选择器是一个强大的工具，可用于验证表单输入并提供反馈。通过使用 :invalid 选择器，您可以改善用户体验并确保表单数据有效。