$(document).ready(function () {
	
	$('.custom').each(function() {
		styleSelect($(this));	
	});	
	
});

function styleSelect(elm) {

	 //Get the width of the select input (including border and padding) and apply it to our span.  All other CSS is handled through style sheets
	var width = elm.outerWidth();
	
	var curVal = elm.children('option:selected').text(); //Get the current option text
	var span = $('<span class="custom-select">'+curVal+'</span>'); //Create our stylin' span element
	var icon = $('<span class="custom-select-icon"></span>');
		
	elm.before(span.after(icon)); //Insert the span element before the select input
	span.append(icon);
	
	var spanPadLeft = span.css('padding-left').replace('px', '');
	var spanPadRight = span.css('padding-right').replace('px', '');
	
	span.css({'width':width-spanPadLeft-spanPadRight});
	
	elm.change(function() {
		curVal = elm.children('option:selected').text();
		span.text(curVal).append(icon);
	});


}