JSFiddle - React, Tailwind, and code Playground

by gion_13

HTML

<select class="jselectbox" id="select1">
</select>

CSS

/* for demo porpuses only*/
.jselectbox{
    float : left;
    margin : 10px;
}


/* this is the plugin requirements : */

.jsb-wrapper{
    cursor: pointer;
    width: 75px;
    position : relative;
    font-family : arial;
    font-size : 11px;
    height : 24px;
    text-transform : capitalize;
}
.jsb-wrapper .jsb-trigger{
    float : right;
    background-image : url('http://robotrans.ro/trigger3.png');
    background-repeat : no-repeat;
    -webkit-background-size : 100% 100%;
    -moz-background-size : 100% 100%;
    background-size : 100% 100%;
    width : 20px;
    height : 24px;
    z-index: 10;
    position: relative;
} 
.jsb-wrapper .jsb-value, 
.jsb-wrapper .jsb-option-list li{
    padding: 2px 1px 0 4px;
} 
.jsb-wrapper .jsb-value{
    height: 18px;
    overflow: hidden;
    border : 1px solid #e3e3e3;
    z-index: 10;
    position: relative;
    background-color: white;
    background-image : url('http://robotrans.ro/bg-jselectbox2.png');
    background-repeat : no-repeat;
    background-position : 2px 2px;
    padding-top : 4px;
}
.jsb-wrapper .jsb-option-list{
    display : none;
    list-style : none;
    position : absolute;
    border : 1px solid  #e3e3e3;
    width : 71px;
    background-color:#eee;
    z-index : 2;
    padding : 0;
    margin : -3px 0 0 1px;
    /* the height of the drop-down */
    max-height : 200px;
    /* this adds a scrollbar if needed */
    overflow-y : auto;
}
.jsb-wrapper .jsb-option-list li{
    padding : 4px 0;
}
.jsb-wrapper .jsb-option-list li .jsb-option-value{
    display : none;
}
.jsb-wrapper .jsb-option-list li:hover{
    background-color :#fff;
}

JavaScript

/**
*        PLUGIN NAME     :     jSelectBox
*
*        VERSION            :     0.1
*
*        AUTHOR            :     bogdan gradinariu (bogdan.gradinariu [at] gmail [dot] com)
*
*        LICENCE            :    buy me a beer and well talk ;)
*
*        DEPENDENCIES    :    well, just jQuery (tested 1.4+)
*
*        DESC            :     a plugin that allows you to cross-browser customise <select> elements 
*
*        USAGE             :     $('select').jSelectBox(settings); 
*                            settings is an object that may overwrite the $.fn.jSelectBox.defaults described below
*
*        CHANGELIST        :    well, it's the first version, so.. nothing :P
*
*          TO DO            :     - simulate real focus/blur events
*                            - add tabindex navigation
*                            - add keyhandlers (such as arrows) for interaction with the selectbox
**/
(function(b,a,c){b.fn.jSelectBox=function(f){var d=b.extend(true,{},b.fn.jSelectBox.defaults,f);function e(g,h){this.initialise.apply(this,arguments);b.fn.jSelectBox.classPrefixes.push(h.classPrefix)}e.prototype=new function(){var q=this,y,u,w,s,j,o,x;this.el=s;function t(G,F){y=F;u=G;w=b(u);B();s.attr("class",b.trim((w.attr("class")||"")+" jselectbox "+y.classPrefix+"-wrapper"));s.attr("style",w.attr("style")||"");s.attr("id",w.attr("id")||"");s.data("jSelectBoxApi",this);o=s.find("."+y.classPrefix+"-trigger");x=s.find("."+y.classPrefix+"-value");j=s.find("."+y.classPrefix+"-option-list");w.find("option").each(function(H,I){var J=b(I);j.append(b('<li class="'+y.classPrefix+'-option"/>').append(b('<span class="'+y.classPrefix+'-option-value"/>').text(J.attr("value")||J.text()),b('<span class="'+y.classPrefix+'-option-text"/>').text(J.text())))});v();E();p("init")}function B(){s=b('<div class="'+y.classPrefix+'-wrapper"/>').append(b('<div class="'+y.classPrefix+'-trigger"/>').append(b('<div class="'+y.classPrefix+'-trigger-inner"/>')),b('<div...