CSS Sprites: form input (text field) design problem

Question

I want a flag of country to appear in the text field.

It works fine, when all icons are kept separately. For example:

#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 into one vertical CSS sprite image (< 25 KB).

The problem is, that I can't get the same result (only one flag shown at once) with 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>

Screenshoots (correct and wrong)

If it's impossible, what other solutions would you suggest? The flag should change each time the user enters a different location.

Scott Evernden · Accepted Answer · 2010-08-29 23:09:47Z

2

the problem is the flags are too tightly packed together .. spread them out a little vertically so that some transparent shows above and below - ie, make each 'flag' as tall as the text input box

answered Aug 29, 2010 at 23:09

Scott Evernden

40.1k15 gold badges81 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Michael Robinson · Accepted Answer · 2010-08-29 23:06:12Z

2

You could increase the 'blank space' at the top and bottom of your flags when making your flag sprite.

answered Aug 29, 2010 at 23:06

Michael Robinson

29.6k12 gold badges109 silver badges131 bronze badges

Collectives™ on Stack Overflow

CSS Sprites: form input (text field) design problem

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related