JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="selectBox">
    <select name="toppings" id="toppings">
        <option value="pepp">Pep</option>
        <option value="mush">Mushroom</option>
        <option value="pine">Pineapple</option>
        <option value="xchs">Extra Cheese</option>
    </select> 
</div>

CSS

/* .selectBox {
    background: #e3e3e3;
    padding:3px;
    display:inline-block;
    padding-right:50px;
    position:relative;
    top:0;
    margin-bottom
} */
#toppings {
    display:none;
}
.fakeSelect {
    border:1px solid #999;
    background: #e4e4e4;
    padding:4px;
    padding-bottom:2px;
}
.fakeSelect div {     cursor:pointer;
    margin:2px;
    padding:2px;
    border:1px solid #999;
    text-align:center;
    background:white;
    box-shadow:0 1px 0 white ,inset 0 1px 2px #888;
    border-radius:8px;
    margin-bottom:5px;
}
.fakeSelect div:hover {
    box-shadow:none;
    border:1px solid #333;
}
.down {
    background:red;
    height:22px;
    width:22px;
    display:block;
    position:absolute;
    top:7px;
    right:10px
}
.selected{
    background: green !important;
}
.fakeDownOut {
    background:blue !important;
}

JavaScript

$.fn.fakeSelect = function(userWidth) {
	//parent
	var parentStyle = "padding:0px; display:inline-block; padding-right:40px; position:relative; top:0; padding-bottom:0";
	$(this).prop("style", parentStyle);

	//add our pieces
	var fakeSelect = "<div class='fakeSelect'></div>";
	var downArrow = "<div class='down'></div>";
	$(this).prepend(fakeSelect);
	$(this).prepend(downArrow);

	// if it has a custom width
	if (userWidth != null) {
		alert('width working');
		$(this).find('.fakeSelect').width(userWidth);
	} ;


	$(this).find('select 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().parent().find('.fakeSelect').append(option);
	});

	$('.selectBox .fakeSelect div').click(function(){
	    $(this).parent().find($('.selected')).removeClass('selected');
	    $(this).addClass('selected');
	    var optName = $(this).prop('class');
	    //alert(optName);
	    $(this).find('select').val(optName);
	    $(this).siblings().slideUp(600);

	});

	//hide all options 
	$('.fakeSelect div:first-child').addClass('selected');
	$('.fakeSelect div').not(":first-child").hide();

	$(this).hover(function(){
	    $(this).find('.fakeSelect div').stop(true,true).slideDown(200);
	    
	    $(this).find($('.down')).addClass('fakeDownOut');
	    }, function(){
	    $(this).find('.fakeSelect div').not('div.selected').delay(300).slideUp(600);
	        $(this).find($('.down')).removeClass('fakeDownOut');
	});


	    
	return this;
};
$('.selectBox').fakeSelect(200);