A wrapper that replaces a <select> element with a JavaScript powered drop down with mini-flags.

Check the demo in this repo.

The {countrycode} variable is in the format specified in ISO 3166-1 alpha-2.

<select name="country" class="flags">
	<option class="flag flag-{countrycode}">Country Name</option>
</select>

There is a custom-listener attached the selection of an item.

If your <select> has an name of countries:

$('input[name="countries"]').on('country-selected', function(){
    // ...
});

..or, if your <select> had an id="countries" property:

$('#countries').on('country-selected', function(){
    // ...
});

git clone https://github.com/WillemLabu/country-select && cd country-select

npm i && bower install

grunt init

:{D

To build a minified & optimised version of the code, run grunt and check the dist directory.

Using the FamFamFam pack from flag-sprites.

You can generate a new flag-sprite and CSS from that site and just replace the proper files.

MIT