JSFiddle - React, Tailwind, and code Playground

by majidf

HTML

<div>
    <select class="selectCustom" style="width:200px" title="Select one" onmouseover="mouseOver()" onmouseout="mouseOut()" onmousedown="mouseDown()">
        <option>Blue</option>
        <option selected="selected">Red</option>
        <option>Green</option>
        <option>Yellow</option>
        <option>Brown</option>
    </select>
</div>
<div>
    <select class="selectCustom2" style="width:200px" title="Select one" onmouseover="mouseOver2()" onmouseout="mouseOut2()" onmousedown="mouseDown2()">
        <option>Blue</option>
        <option selected="selected">Red</option>
        <option>Green</option>
        <option>Yellow</option>
        <option>Brown</option>
    </select>
</div>
<div>
    <select class="selectCustom3" style="width:200px" title="Select one" onmouseover="mouseOver3()" onmouseout="mouseOut3()" onmousedown="mouseDown3()">
        <option>Blue</option>
        <option selected="selected">Red</option>
        <option>Green</option>
        <option>Yellow</option>
        <option>Brown</option>
    </select>
</div>

CSS

.selectClick{background: purple !important}
.selectBkgrnd{background:blue !important}
.selectHover{background: pink !important}
.selectCustom, .selectCustom2, .selectCustom3{position:relative;z-index:10;width:200px !important;  height:22px;}
.selectCustomSpan, .selectCustom2, .selectCustom3 {position:absolute;bottom:0;float:left;left:0;width:200px;height:22px;text-indent:10px;background:blue;   z-index:1;}
div{position:relative;}

JavaScript

$(document).ready(function() {
    if (!$.browser.opera) {
        $('.selectCustom').each(function() {
            var title = $(this).attr('title');
            if ($('option:selected', this).val() != '') title = $('option:selected', this).text();
            $(this).css({
                'z-index': 10,
                'opacity': 0,
                '-khtml-appearance': 'none'
            }).after('<span class="selectCustomSpan">' + title + '</span>').change(function() {
                val = $('option:selected', this).text();
                $(this).next().text(val);
            });
        });
    };
    if (!$.browser.opera) {
        $('.selectCustom2').each(function() {
            var title = $(this).attr('title');
            if ($('option:selected', this).val() != '') title = $('option:selected', this).text();
            $(this).css({
                'z-index': 10,
                'opacity': 0,
                '-khtml-appearance': 'none'
            }).after('<span class="selectCustomSpan2">' + title + '</span>').change(function() {
                val = $('option:selected', this).text();
                $(this).next().text(val);
            });
        });
    };
    if (!$.browser.opera) {
        $('.selectCustom3').each(function() {
            var title = $(this).attr('title');
            if ($('option:selected', this).val() != '') title = $('option:selected', this).text();
            $(this).css({
                'z-index': 10,
                'opacity': 0,
                '-khtml-appearance': 'none'
            }).after('<span class="selectCustomSpan3">' + title + '</span>').change(function() {
                val = $('option:selected', this).text();
                $(this).next().text(val);
            });
        });
    };
});

function mouseOver() {
    $('.selectCustomSpan').addClass('selectHover');
}

function mouseOut() {
    $('.selectCustomSpan').removeClass('selectHover').addClass('selectBkgrnd');
}

function mouseDown() {
   ...