Bootstrap 5表单was-validated类自动切换边框颜色问题咨询

我在使用Bootstrap 5表单时遇到一个现象：为表单添加was-validated类后，输入框显示红色边框；但输入内容后，红色边框自动变为绿色边框。我未使用JavaScript，请问该自动行为的来源是什么？

对应的表单代码：

<form class="was-validated">
    Your Name:
    <input type="text" class="form-control" required>
    <button type="submit" class="btn btn-secondary">Submit</button>
</form>

这是Bootstrap 5内置的原生CSS表单验证特性导致的，完全不需要JavaScript参与，核心逻辑如下：

• Bootstrap 5直接利用了浏览器原生表单验证对应的CSS伪类：
  • 当必填输入框为空（不符合验证规则）时，浏览器会给元素加上:invalid伪类，Bootstrap通过这个伪类渲染出红色边框样式
  • 一旦输入内容满足验证要求（比如必填项已输入内容），浏览器会自动将伪类切换为:valid，对应Bootstrap设置的绿色边框样式
• 给表单添加was-validated类，就是触发Bootstrap对表单内所有控件的验证状态样式渲染，浏览器会实时根据输入内容的合法性自动切换:invalid和:valid伪类，从而让边框颜色自动变化
• 整个行为是浏览器原生表单验证能力结合Bootstrap的CSS样式实现的，全程不需要额外编写JavaScript代码来控制验证状态

内容的提问来源于stack exchange，提问作者Saad