简介

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

语法

:invalid 选择器的语法如下：

:invalid {
  /* 样式 */
}

使用示例

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

input:invalid {
  border: 1px solid red;
}

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

input:invalid {
  background-color: #ffcccc;
  color: #333333;
  font-weight: bold;
}

支持的元素

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

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

浏览器支持

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

• Chrome
• Firefox
• Safari
• Edge
• Opera

用例

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

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

注意事项

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

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

input {
  border: 1px solid red;
}
input:valid {
  border: 1px solid green;
}

替代方案

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

<input id="myInput">
<script>
  const input = document.getElementById('myInput');

  input.addEventListener('invalid', () => {
    input.style.border = '1px solid red';
  });
</script>

结论

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