how to change background position when focus on input

<div class="field">
    <input name="password" type="password" />
</div> 

I want to change the background image's position of the field div when there is focu开发者_运维百科s on input. Any idea to do it with jquery? Thanks.

I've not tried this, but I think the following should work:

$('input:password').focus(
    function(){
        $(this).parent().css({'background-position': 'Xpx Ypx'});
    }).blur(
    function(){
        $(this).parent().css({'background-position': 'Xpx Ypx'});
    });

You can watch for the focus event on your password input, and then change the background-position CSS property on target using jQuery's css() method.

$('div.field input[name="password"]').focus(function() {
    $(this).closest('div.field').css('background-position', '10px 10px');
});

$('.field input').focus(function() {
    $(this).addClass('focus')
});

Then just set the .field.focus classes background position.