annoying problem with search field sprite and deselect

I created this awesome search field for my graphics. And use css sprite to create effect.

Problem with this approach is that if you write text, and than de开发者_如何学编程select (click anywhere outside the search field), first background reappears, I hate how it looks...

any ideas how to make it stay in focus state when text is entered?

I could probably use jquery, but there should be an easier way around right?

.search input.box {
background: url("img/search-bg.png") no-repeat scroll 0 0 transparent;
color: #FFFFFF;
font-size: 0.9em;
height: 32px;
padding: 0 0 0 31px;
width: 159px;

}

.search input.box:focus {
    background: url("img/search-bg.png") no-repeat scroll left -32px transparent;
    outline: medium none;
}

Not sure if you figured this out or not. I always use jQuery for this. The problem is that once the input looses focus, it will revert back to your .search input.box style.