formNoValidate按钮属性仍触发:user-invalid CSS类，有无非JavaScript解决办法？

确实存在纯CSS的解决方式，核心是利用CSS的:has()伪类识别点击带formnovalidate属性按钮的场景，从而覆盖:user-invalid的样式：

1. 先定义默认的:user-invalid错误样式：

:user-invalid {
  border: 2px solid #dc3545;
  background-color: #fff5f5;
}

2. 添加规则，当点击带formnovalidate的按钮时，重置表单内所有控件的:user-invalid样式：

form:has([formnovalidate]:active) :user-invalid {
  border: initial;
  background-color: initial;
  /* 根据实际需求还原其他默认样式 */
}

补充说明 #

• :has()伪类目前已被Chrome、Firefox（121+）、Safari等现代主流浏览器支持，兼容性足够覆盖大多数场景。
• 这个方法的原理是：当用户点击带formnovalidate的按钮时，表单会被:has([formnovalidate]:active)选中，此时针对表单内的:user-invalid控件重置样式，避免错误状态显示。

如果需要兼容更老的浏览器，还有一种局限性稍大的方案——利用兄弟选择器（要求按钮位于表单控件之后）：

[formnovalidate]:focus ~ :user-invalid {
  border: initial;
  background-color: initial;
}

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