CSS Sprites: Problem with form input (text box)

Question

CSS Sprites: Problem with form input (text box)

I want the country flag to appear in the text box.

It works great when all the icons are stored separately. For instance:

#search input[type="text"] {
    background: #FFFFFF url(GB.png) no-repeat right center;
}

<div id="search">
    To: <input name="to" type="text" />
</div>

However, having more than 60 flags makes a lot of possible HTTP requests, so I put them in a single vertical image of a CSS sprite (<25 KB).

The problem is that I cannot get the same result (only one flag shown immediately) using CSS sprites:

#search input[type="text"] {
    background: #FFFFFF url(countries.png) no-repeat right center;
}
.c-GB { background-position: 0 -368px;  } 

<div id="search">
    To: <input name="to" type="text" class="c-GB" />
</div>