哈哈，这个坑我踩过好几次！直接用style.borderColor硬设红色确实会把原来的样式给“焊死”在inline里，想恢复就得用点巧劲，给你几个靠谱的解决办法：

这种方式既符合样式与逻辑分离的最佳实践，后期维护也方便，还能顺便加其他错误提示样式（比如阴影）。

1. 先在CSS里定义一个错误状态类：

.input-error {
  border-color: red;
  /* 可选：加个红色阴影增强提示 */
  box-shadow: 0 0 4px rgba(255, 0, 0, 0.3);
}

2. 验证不通过时给输入框加这个类，验证通过或用户开始输入时移除：

// 标记邮箱错误
const emailInput = document.getElementById("loginFormEmail");
emailInput.classList.add("input-error");

// 恢复正常样式
emailInput.classList.remove("input-error");

比如可以监听输入框的input事件，用户一输入就自动清除错误标记：

emailInput.addEventListener('input', () => {
  emailInput.classList.remove("input-error");
});

如果你不想额外加CSS类，也可以直接清空inline的borderColor设置，让浏览器自动回到原本的样式（不管是你自定义的CSS还是浏览器默认样式）：

// 恢复正常边框颜色
document.getElementById("loginFormEmail").style.borderColor = "";

别用"initial"哦，那会强制用浏览器的默认边框色，可能和你原本自定义的样式不一致，清空是最稳妥的。

如果你的输入框边框颜色是动态生成的（比如根据主题变化），可以提前把原始颜色存起来，之后再恢复：

// 页面加载时保存原始边框色
const emailInput = document.getElementById("loginFormEmail");
const originalBorderColor = emailInput.style.borderColor || getComputedStyle(emailInput).borderColor;

// 标记错误
emailInput.style.borderColor = "red";

// 恢复原始颜色
emailInput.style.borderColor = originalBorderColor;

不过这种方法有点冗余，除非真的需要处理动态样式，否则方法一完全够用。

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