所以,我有一个 <input>
具有 :focus
的元素来自 CSS 的属性。
CSS
#my_input {
border: 1px solid black;
}
#my_input:focus {
border: 1px solid green;
}
此输入用于登录表单。如果用户输入的表单有误,比如输入的字符少于最小字符数,则输入表单的边框为红色。错误修复后,我希望边框恢复正常。边框恢复正常,但现在 CSS 中的 :focus 元素不起作用。
一旦用户修复了错误
JS
$("#my_input").css("border", "1px solid black");
你如何解决这个问题?
最佳答案
通过使用 $("#my_input").css("border", "1px solid black");
,当您将该样式直接添加到元素时,您正在覆盖 CSS。相反,使用 $("#my_input").css("border", "");
然后将强制#my_input
使用您原来的 CSS 样式。
作为快速提示,最好执行以下操作:
CSS
#my_input {
border: 1px solid black;
}
#my_input:focus {
border-color: green;
}
#my_input.error {
border-color: red;
}
然后在您的 JS 中,突出显示错误:
$("#my_input").addClass('error');
然后删除错误突出显示:
$("#my_input").removeClass('error');
关于jquery - 我怎样才能保留原来的 :focus element with CSS?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37636468/