JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="selectBox">
				<span class="icon-cloud"></span>
				Repositories
				<select name="cat" id="picker">
					<option value="pepp">Pep</option>
					<option value="mush">Mushroom</option>
					<option value="pine">Pineapple</option>
					<option value="xchs">Extra Cheese</option>
				</select>
			</div>

			<div class="selectBox">
				<span class="icon-cloud"></span>
				Repositories
				<select name="cat" id="picker">
					<option value="pepp">Pep</option>
					<option value="mush">Mushroom</option>
					<option value="pine">Pineapple</option>
					<option value="xchs">Extra Cheese</option>
				</select>
			</div>

			<div class="selectBox">
				<span class="icon-cloud"></span>
				Repositories
				<select name="cat" id="picker">
					<option value="pepp">Pep</option>
					<option value="mush">Mushroom</option>
					<option value="pine">Pineapple</option>
					<option value="xchs">Extra Cheese</option>
				</select>
			</div>

			<div class="selectBox">
				<span class="icon-cloud"></span>
				Repositories
				<select name="cat" id="picker">
					<option value="pepp">Pep</option>
					<option value="mush">Mushroom</option>
					<option value="pine">Pineapple</option>
					<option value="xchs">Extra Cheese</option>
				</select>
			</div>

CSS

/******************
**Faker - A simple set of form elements.
**Victor Fuentes 2013
**********************/

/* .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:0;
    width:200px;
    color: #333;
    display: inline-block;
    position: absolute;
    top: 0; right: 0;
    margin-right: 0;
    padding-right: 30px;
    he
    100%;
}
.fakeSelect div {
     cursor:pointer;
    margin:2px;
    padding:1px;
    border:1px solid #999;
    text-align:center;
    background:white;
    box-shadow:0 1px 0 white ,inset 0 1px 2px #888;
    border-radius:8px;
    color: #333;
    position:relative;
}
.fakeSelect div:hover {
    box-shadow:none;
    border:1px solid #333;
}
.down {
    background:red;
    height:22px;
    width:22px;
    display:block;
    position:absolute;
    top:5px;
    right:5px;
    background: url(../img/down.png);
}


.fakeDownOut {
    background:blue !important;
}
.selected{
    background: white !important;
    box-shadow: 1px 0 0 white;
}

JavaScript

//Fake Select Function
$.fn.fakeSelect = function(userWidth) {
	//parent
    var parentStyle = " display:inline-block; padding-right:240px; position:relative; top:0; padding-top:5px;border:1px solid black;";
	$(this).prop("style", parentStyle);

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

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


	$(this).find('select option').each(function(){
		alert('found');
	    //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);
	});
	$(this).find('select option').css('display', 'none');

	$('.selectBox .fakeSelect div').click(function(){
	    $(this).parent().find($('.selected')).removeClass('selected');
	    var optName = $(this).prop('class');
	    $(this).addClass('selected');
	    alert(optName);
	    $(this).parent().parent().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).css("z-index","100");
	    
	    $(this).find($('.down')).addClass('fakeDownOut');
	    }, function(){
	    $(this).find('.fakeSelect div').not('div.selected').delay(300).slideUp(600).css("z-index","50");
	        $(this).find($('.down')).removeClass('fakeDownOut');
	});


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