[重复]时如何更改html输入的边框颜色答案

【问题标题】：How to change border color of the html input when [duplicate][重复]时如何更改html输入的边框颜色
【发布时间】：2019-06-25 11:02:04
【问题描述】：

为了学习，我正在用 HTML、CSS 和 PHP 制作一个登录注册系统。会有不同的 HTML 文本框和东西。

我想要实现的是当我在一个文本框中写一些东西，然后取出光标并单击另一个文本框，我想将第一个文本框的边框颜色更改为绿色。

我知道如何通过 CSS 更改边框颜色，但我只想在此类事件发生时才这样做。任何帮助将不胜感激。

【问题讨论】：

请发布您为实现此目的而编写的代码。
你在 focusout,jQuery 上附加了一个 CSS 类，在 vanilla javascript blur 事件中。见codepen.io/Takumari85/pen/RaYwpJ

标签： javascript php html css

【解决方案1】：

将blur 事件附加到input。

document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('blur', function() {
    this.classList.toggle('green', this.value.length > 0);
  });
});

.green {
    border: 2px solid green;
}

<input type="text">
<input type="text">
<button>Click Me</button>

【讨论】：

【解决方案2】：

您可以通过 Jquery 添加一个类并在 CSS 中给出样式。当您稍后尝试添加验证时，它也会对您有所帮助，然后您只需更改类名以显示红色边框以指示错误。

您还可以在您处于焦点时添加一个类以显示您的多个状态更改。

$(document).ready(function($) {
    $(".text").focus(function(){
       $(this).addClass("Yellow");
    }).blur(function(){
       $(this).addClass("success");
    })
});

【讨论】：

【解决方案3】：

这里的代码是：

input {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  outline: none;
  height: 25px;
  width: 150px;
}

input:focus {
  border-color: green;
}

&lt;input type="text" /&gt;

【讨论】：

这不能回答问题 - OP 想要在离开填写字段时更改边框
更好的做法是更改轮廓样式，因为更改边框可能会导致布局更改