javascript - 输入：焦点只工作一次

Question

小提琴

我希望我的文本框有一个#96f226边框input:focus，它可以工作。但是，如果您点击离开并重新点击，它就不再有绿色边框了。

CSS：

#input {
  background: #4a4a4a;
  border: 1px solid #454545;
  color: #96f226;
}
#input:hover {
  background: #656565;
}
#input:focus {
  outline: none;
  border: 1px solid #96f226
}

HTML：

<input type='text' id='input'>

编辑：

---

只有当你点击进入，开始输入，点击退出，然后点击进入时，它才不会这样做。

Answer 1

发生这种情况的原因是您的 jQuery 在第 9 行的输入中添加了内联样式：

 $('#input').css('border', '1px solid #454545');

内联样式覆盖样式表中定义的样式。

一个快速的解决方法是添加!important到您的 CSS 中：

#input:focus {
    outline: none;
    border: 1px solid #96f226 !important;
}

这行得通，但它更像是一种黑客攻击。

如果我理解正确，您正在添加内联样式以在出现错误后删除红色边框。一个更好的方法是简单地删除内联样式。这样可以解决冲突，您无需添加!importanthack。将 jQuery 中的第 9 行替换为以下内容：

$('#input').css('border', '');