JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

Repositories
                <select name="cat" id="picker1">
                    <option value="pepp">Pep</option>
                    <option value="mush">Mushroom</option>
                    <option value="pine">Pineapple</option>
                    <option value="xchs">Extra Cheese</option>
                </select>
<br>
                  <select name="cat" id="picker2" width='200px'>
                    <option value="pepp">Pep</option>
                    <option  value="mush">Mushroom</option>
                    <option value="pine">Pineapple</option>
                    <option value="xchs">Extra Cheese</option>
                </select>
    <br>
                      <select name="cat" id="picker3" style="width:200px;">
                    <option value="pepp">Pep</option>
                    <option value="mush">Mushroom</option>
                    <option value="pine">Pineapple</option>
                    <option value="xchs">Extra Cheese</option>
                </select>

CSS

body {
    padding:10px;
}
.selectBox {
    position:relative;
    display:inline-block;
    z-index:1;
    background:#e3e3e3;
    padding:3px;
    border-radius:5px;
    margin:2px;
border:1px solid #999;
}
.selectBox:hover {
    z-index:10;
}
.selectView, .selectList {
    padding:4px 5px 2px;
    background:;
    display:inline-block;

    position:relative;
    text-shadow: 1px 1px 0 white;
    border-radius:5px;
    border:1px solid #999;
}
.selectView {
background:white;
    margin-bottom:0px;
    border-radius:0 5px 5px 0;
    position:relative;
    z-index:1;
    border-radius:4px;
        box-shadow:0 1px 0 white,inset 0 1px 2px #777;
}
.selectList {
    padding: 3px 8px 4px;
    border-radius:0 0 5px 5px;
position:absolute;
    top:100%;
    left:0;
    border-top:3px solid #777;
    background:#e3e3e3
}
.selectList div {
    background:white;
    padding:5px;
    border-radius:5px;
    box-shadow:0 1px 0 white,inset 0 1px 2px #777;
    border:1px solid #999;
    margin-top:3px;
    
}
.selectList div:hover {
    background:;
        box-shadow:0 1px 0 white,inset 0 1px 2px #777, 0 0 4px #999;
    border-color:#666;
}
.selectView img {
    position:absolute;
    top:2px;
    right:2px
}
.down {
    background:blue;
    width:20px;
    height:20px;
    display:block;
    position:absolute;
    top:3px;
    right:3px;
        z-index:4;
}

JavaScript

$.fn.fakeSelect = function() {
    var parent = $(this);
//APPEND PIECES
    var fakeSelect = "<div class='selectBox'><div class='selectView'><span class='down'></span></div><div class='selectList'></div></div>";
    $(this).after(fakeSelect);
    //hide the list
    $('.selectList').hide();
// MATCH WIDTHS
    var fakeWidth = $(this).width();
    $(this).next().children('div').width(fakeWidth);
//CONSTRUCT OPTIONS
    $(this).find('option').each(function(){
        //get the info
        var optionText = $(this).text();
        var optionVal = $(this).attr("value");
        //build the option
        var option = "<div class='" + optionVal + "'>" + optionText + "</div>";
        //put it in
            $(this).parent().next().find('.selectList').append(option);

    //$(this).parent().parent().find('.selectList');
    });
    
    //hide all options 
    var currentVal = $(this).find('option:selected').html();
    alert(currentVal);
    $(this).next().find('.selectView').prepend(currentVal);
    
//LIST SHOW/HIDE
    $(this).next().hover(function(){
        $(this).find('.selectList').stop(true,true).slideDown(200);
    },function(){
        $(this).find('.selectList').delay(300).stop(true,true).slideUp(200);
    });
    
//CLICK FUNCTION
    $(this).next().find(' div.selectList div').click(function(){
        
        var clickedItem = $(this).attr('class');
        var clickedItemText = $(this).text();
        $(this).parent().parent().prev().val(clickedItem); $(this).parent().parent().find('.selectView').html(clickedItemText + "<span class='down'></span>");
        $(this).parent().slideUp(300);
    });
    
    
    //hide it!
    $(this).hide(0);
};
$('#picker1').fakeSelect();
$('#picker2').fakeSelect();
$('#picker3').fakeSelect();