CODEWITHSUNDEEP
jquerycssfocus
coldpumpkin
coldpumpkin

Reputation: 714

Focus doesn't work after I changed the default border with javascript

Basically I have a form. Above the form I have a link that anchors to the form. When someone clicks the anchor, it changes the form inputs' css's to give it a red border. I also set a timer to restore the original border color after a few secs. The thing is, after all this process happens, when someone clicks an input, the :focus doesn't work anymore. (The :focus used to give the border a darker color). I'm using jQuery by the way.

How can I avoid this to happen? I want the :focus to happen normally even after the anchor is applied. Here is the fiddle link http://jsfiddle.net/LSpm8/ and here is the code:

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>

Upvotes: 1

Views: 160

Answers (2)

Scott Sword
Scott Sword

Reputation: 4708

If you use !important like so it should fix your problem:

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

This will prevent jQuery from over writing it inline. Here is a fiddle of it - http://jsfiddle.net/yasEB/

Upvotes: 1

mrtsherman
mrtsherman

Reputation: 39872

When jquery applies a style it is inserted inline. Essentially preventing any stylesheets from affecting the element. Try just clearing the border border: ''.

http://jsfiddle.net/LSpm8/1/

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

Upvotes: 1

Related Questions