CODEWITHSUNDEEP
javascripthtmlcss
CodersSC
CodersSC

Reputation: 710

focus on a textfield the background is not changing colour

Hi this may be a silly question but when i click on a textfield i want the back ground to change colour but i do not see why it is not working

could someone tell me where i am going wrong

code is below

//JQUERY
$(function() {

    $('input[type="text"]').focus(function() 
    {
        $(this).addClass("focus");
    });

    $('input[type="text"]').blur(function() 
    {
        $(this).removeClass("focus");
    });

})

;

//CSS
.focus {
    border: 2px solid #AA88FF;
    background-color: #FFEEAA;
}

HTML //All the textfield are type text when i inspect them too

Upvotes: 0

Views: 592

Answers (3)

yoav barnea
yoav barnea

Reputation: 5994

Seems like a quirk of the jquery library. Try:

$(this).css({...})

instead of:

$(this).addClass(...)

and it should work.

Upvotes: 1

user1211577
user1211577

Reputation:

I'm not sure why you're using jQuery here, its perfectly possible to change background colours with CSS.

    input[type=text]:focus {
        border: 2px solid #AA88FF;
        background-color: #FFEEAA;
    }

Upvotes: 1

Kyle
Kyle

Reputation: 67244

You can do this in CSS with no need for jQuery (for the newer major browsers at least)

input[type="text"]:focus
{
   border: 2px solid #AA88FF;
   background-color: #FFEEAA;
}

:)

Upvotes: 3

Related Questions