jquery - 使用 javascript 更改默认边框后焦点不起作用

Question

基本上我有一个表格。在表格上方，我有一个锚定到表格的链接。当有人单击 anchor 时，它会更改表单输入的 css 以给它一个红色边框。我还设置了一个计时器，在几秒后恢复原来的边框颜色。问题是，在所有这些过程发生之后，当有人单击输入时，:focus 不再起作用。 ( :focus 用于为边框提供更深的颜色)。顺便说一句，我正在使用 jQuery。

如何避免这种情况发生？我希望 :focus 即使在应用 anchor 后也能正常发生。这是 fiddle 链接 http://jsfiddle.net/LSpm8/这是代码:

JS

$("#anchor").click(
    function () {
        clearTimeout($.data(this, 'timer'));
        $("#form input").css({
            'border': '1px solid red'
        });
        $.data(this, 'timer', setTimeout($.proxy(function() {
            $("#form input").css({
                'border': '1px solid #CCC'
            });
        }, this), 1800));
    }
);

CSS

input { border: 1px solid #CCC; }
input:focus { border: 1px solid #000; }

HTML

<a href="#form" id="anchor">Link</a>
<form id="form">
    <input type="text" />
</form>

Answer 1

如果你像这样使用 !important 它应该可以解决你的问题:

input:focus { border: 1px solid #000!important; }

这将防止 jQuery 内联重写它。这是它的 fiddle - http://jsfiddle.net/yasEB/