Background-image in select boxes for Chrome (Windows)

You may want to insert a background-image e.g. a flag icon into a language select box without loosing the background color. Using Chrome on Windows you will probably face the problem that defining the background of the select tag with a background-color and a background-image will only show you either the background color or the image.

Here is a little hack to work around this behaviour using base64 encoded images.

background: url('/path/to/your/image.png') no-repeat,      url('data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==');

Other examples for background colors:

white: data:image/gif;base64,R0lGODlhAQABAIAAAP7//wAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==

black: data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=

transparent: data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"

Tested on Chrome 32.0 and Windows 7.