javascript - 输入 :focus only working once

Question

Fiddle

我希望我的文本框在 input:focus 处有一个 #96f226 边框，它可以工作。但是如果你点击离开然后点击回来，它就不再有那个绿色边框了。

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;
}

这行得通，但更像是一种 hack。

如果我没理解错的话，您是在添加内联样式以在出错后移除红色边框。一个更好的方法是简单地删除内联样式。这将解决冲突，您不需要添加 !important hack。将 jQuery 中的第 9 行替换为以下内容:

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