专注于文本字段，背景不改变颜色

Question

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

Answer 1

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;
}

:)

Answer 2

Seems like a quirk of the jquery library. Try:

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

instead of:

$(this).addClass(...)

and it should work.

Answer 3

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;
    }