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

#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:inset 0 0 4px #999;
    border-radius:8px;
    margin-bottom:5px;
}
.fakeSelect div:hover {
    box-shadow:none;
    border:1px solid #333;
}
.down {
    background:red;
    height:22px;
    width:22px;
    position:absolute;
    top:7px;
    right:10px
}
.selected{ background: green !important;}
.fakeDownOut { background:blue !important;}

JavaScript

//userwidth is the width the the inner box
$.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');