输入:焦点只工作一次

input:focus only working once

本文关键字：一次 工作 焦点 输入      更新时间：2023-09-26

小提琴

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

编辑：

仅当您单击输入、开始键入、单击退出，然后单击输入时，它才会执行此操作。

发生这种情况的原因是您的 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', '');
相关文章：