JSFiddle - React, Tailwind, and code Playground
HTML
<div class="country"><i></i> Spain</div>
<select name="country">
<option value="">Country...</option>
<option value="AF">Afghanistan</option>
<option value="AL">Albania</option>
<option value="DZ">Algeria</option>
<option value="AS">American Samoa</option>
<option value="AD">Andorra</option>
<option value="AG">Angola</option>
<option value="AI">Anguilla</option>
<option value="AG">Antigua & Barbuda</option>
<option value="AR">Argentina</option>
<option value="AA">Armenia</option>
<option value="AW">Aruba</option>
<option value="AU">Australia</option>
<option value="AT">Austria</option>
<option value="AZ">Azerbaijan</option>
<option value="BS">Bahamas</option>
<option value="BH">Bahrain</option>
<option value="BD">Bangladesh</option>
<option value="BB">Barbados</option>
<option value="BY">Belarus</option>
<option value="BE">Belgium</option>
<option value="BZ">Belize</option>
<option value="BJ">Benin</option>
<option value="BM">Bermuda</option>
<option value="BT">Bhutan</option>
<option value="BO">Bolivia</option>
<option value="BL">Bonaire</option>
<option value="BA">Bosnia & Herzegovina</option>
<option value="BW">Botswana</option>
<option value="BR">Brazil</option>
<option value="BC">British Indian Ocean Ter</option>
<option value="BN">Brunei</option>
<option value="BG">Bulgaria</option>
<option value="BF">Burkina Faso</option>
<option value="BI">Burundi</option>
<option value="KH">Cambodia</option>
<option value="CM">Cameroon</option>
<option value="CA">Canada</option>
<option value="IC">Canary Islands</option>
<option value="CV">Cape Verde</option>
<option value="KY">Cayman Islands</option>
<option value="CF">Central African Republic</option>
<option value="TD">Chad</option>
<option value="CD">Channel Islands</option>
<option value="CL">Chile</option>
<option value="CN">China</option>
<option value="CI">Christmas Island</option>
<option value="CS">Cocos Island</option>
<option value="CO">Colombia</option>
<option value="CC">Comoros</option>
<option...
CSS
.country {
margin: 10px;
padding: 4px 6px;
border: 1px solid #999;
border-radius: 5px;
display: inline-block;
font-family: tahoma;
font-size: 12px
}
.country i {
background: url(https://dl.dropbox.com/u/3413283/flags.png) no-repeat;
display: inline-block;
width: 16px;
height: 11px;
}
JavaScript
(function($) {
// size = flag size + spacing
var default_size = {
w: 20,
h: 15
};
function calcPos(letter, size) {
return -(letter.toLowerCase().charCodeAt(0) - 97) * size;
}
$.fn.setFlagPosition = function(iso, size) {
size || (size = default_size);
return $(this).css('background-position',
[calcPos(iso[1], size.w), 'px ', calcPos(iso[0], size.h), 'px'].join(''));
};
})(jQuery);
// USAGE:
(function($) {
$(function() {
// on load:
$('.country i').setFlagPosition('es');
});
})(jQuery);