Question

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

Answer 1

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.