输入：焦点只工作一次

Question

Fiddle

我希望我的文本框在#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;
}

这有效，但它更像是一个黑客。

如果我理解正确，您会添加内联样式以在发生错误后删除红色边框。更好的方法是简单地删除内联样式。这将解决冲突，你不需要添加!important黑客。用以下内容替换jQuery中的第9行：

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