JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css">
<select id="selectCountry" class="form-control country-select">
    <option value="">Select a country</option>
    <option class="valid-option" value="AU" data-iconurl="https://coh-tam-dev11.cochlear.com:444/ui/img/flags/AU.gif">Australia</option>
    <option class="valid-option" value="US" data-iconurl="https://coh-tam-dev11.cochlear.com:444/ui/img/flags/US.gif">United States</option>
    <option class="valid-option" value="CA" data-iconurl="https://coh-tam-dev11.cochlear.com:444/ui/img/flags/CA.gif">Canada</option>
    <option class="valid-option" value="GB" data-iconurl="https://coh-tam-dev11.cochlear.com:444/ui/img/flags/GB.gif">United Kingdom</option>
    <option class="valid-option" value="IE" data-iconurl="https://coh-tam-dev11.cochlear.com:444/ui/img/flags/IE.gif">Ireland</option>
</select>

CSS

/*
 * jquery.selectBoxIt.css 3.8.0
 * Author: @gregfranko
 */

/*
  Common CSS Properties
  ---------------------
  These properties will be applied to any themes that you use
*/

/* SelectBoxIt container */
 .selectboxit-container {
    position: relative;
    display: inline-block;
    vertical-align: top;
}
/* Styles that apply to all SelectBoxIt elements */
 .selectboxit-container * {
    font: 14px Helvetica, Arial;
    /* Prevents text selection */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: -moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    outline: none;
    white-space: nowrap;
}
/* Button */
 .selectboxit-container .selectboxit {
    width: 220px;
    /* Width of the dropdown button */
    cursor: pointer;
    margin: 0;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    display: block;
    position: relative;
}
/* Height and Vertical Alignment of Text */
 .selectboxit-container span, .selectboxit-container .selectboxit-options a {
    height: 30px;
    /* Height of the drop down */
    line-height: 30px;
    /* Vertically positions the drop down text */
    display: block;
}
/* Focus pseudo selector */
 .selectboxit-container .selectboxit:focus {
    outline: 0;
}
/* Disabled Mouse Interaction */
 .selectboxit.selectboxit-disabled, .selectboxit-options .selectboxit-disabled {
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    cursor: default;
}
/* Button Text */
 .selectboxit-text {
    text-indent: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    float: left;
}
.selectboxit .selectboxit-option-icon-container {
    margin-left: 5px;
}
/* Options List */
 .selectboxit-container .selectboxit-options {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 100%;
    /* Minimum Width of the dropdown list box options */
...

JavaScript

/*! jquery.selectBoxIt - v3.8.0 - 2013-10-05 
 * http://www.selectboxit.com
 * Copyright (c) 2013 Greg Franko; Licensed MIT*/! function (a) {
    "use strict";
    a(window.jQuery, window, document)
}(function (a, b, c, d) {
    "use strict";
    a.widget("selectBox.selectBoxIt", {
        VERSION: "3.8.0",
        options: {
            showEffect: "none",
            showEffectOptions: {},
            showEffectSpeed: "medium",
            hideEffect: "none",
            hideEffectOptions: {},
            hideEffectSpeed: "medium",
            showFirstOption: !0,
            defaultText: "",
            defaultIcon: "",
            downArrowIcon: "",
            theme: "default",
            keydownOpen: !0,
            isMobile: function () {
                var a = navigator.userAgent || navigator.vendor || b.opera;
                return /iPhone|iPod|iPad|Silk|Android|BlackBerry|Opera Mini|IEMobile/.test(a)
            },
            "native": !1,
            aggressiveChange: !1,
            selectWhenHidden: !0,
            viewport: a(b),
            similarSearch: !1,
            copyAttributes: ["title", "rel"],
            copyClasses: "button",
            nativeMousedown: !1,
            customShowHideEvent: !1,
            autoWidth: !0,
            html: !0,
            populate: "",
            dynamicPositioning: !0,
            hideCurrent: !1
        },
        getThemes: function () {
            var b = this,
                c = a(b.element).attr("data-theme") || "c";
            return {
                bootstrap: {
                    focus: "active",
                    hover: "",
                    enabled: "enabled",
                    disabled: "disabled",
                    arrow: "caret",
                    button: "btn",
                    list: "dropdown-menu",
                    container: "bootstrap",
                    open: "open"
                },
                jqueryui: {
                    focus:...