如何使用 JS 更改输入边框颜色 - Javascript

在编写 Web 表单时，我们通常会为输入框添加一些样式，如边框和背景颜色。但是当用户输入错误时，我们可能希望改变输入框的颜色以提示用户输入有误。下面介绍通过 Javascript 来更改输入框的边框颜色的方法。

使用 Javascript 改变输入框边框颜色

我们可以使用下面的 Javascript 代码来更改输入框的边框颜色：

document.getElementById("myInput").style.borderColor = "#ff0000";

其中，myInput 是输入框的 ID，#ff0000 是要设置的颜色，可以根据需要更改。

使用 CSS 样式改变输入框边框颜色

除了使用 Javascript 代码更改输入框的边框颜色，我们还可以使用 CSS 样式。

input[type=text]:invalid {
  border-color: #ff0000;
}

以上代码应该放在 CSS 文件中，当用户输入无效时将会更改输入框的边框颜色。如果一个输入框被标记为 required，但是用户没有输入内容，那么输入框的边框将变成红色。

使用 jQuery 改变输入框边框颜色

如果你使用 jQuery，你也可以使用下面的代码改变输入框的边框颜色：

$("#myInput").css("border-color", "#ff0000");

其中，myInput 是要更改颜色的输入框的 ID，#ff0000 是要设置的颜色。

结论

以上是使用 Javascript、CSS 或 jQuery 更改输入框边框颜色的方法。根据不同情况，你可以选择适合自己的方法。