Custom Select

HTML

<form action="/" method="post" autocomplete="off" enctype="multipart/form-data">
	<label for="month"></label>
	<select class="custom_select" id="month" name="month">
		<option value="">-- Month --</option>
		<option value="january">January</option>
		<option value="february">February</option>
		<option value="march">March</option>
		<option value="april">April</option>
		<option value="may">May</option>
		<option value="june">June</option>
		<option value="july">July</option>
		<option value="august">August</option>
		<option value="september">September</option>
		<option value="october">October</option>
		<option value="november">November</option>
		<option value="december">December</option>
	</select>
</form>

CSS

.select{cursor:pointer;display:inline-block;position:relative;font-size:1.6rem;color:#fff;width:100%;height:3.8rem}
.select_hidden{display:none;visibility:hidden;padding-right:1rem}

.select_styled{position:absolute;top:0;right:0;bottom:0;left:0;background-color:#c0392b;padding:.8rem 1.5rem;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-transition:all .2s ease-in;-o-transition:all .2s ease-in;-moz-transition:all .2s ease-in;transition:all .2s ease-in}
.select_styled:after{content:"";width:0;height:0;border:.7rem solid transparent;border-color:#fff transparent transparent;position:absolute;top:1.6rem;right:1rem}
.select_styled:active,.select_styled.active{background-color:#ab3326}
.select_styled:active:after,.select_styled.active:after{top:.9rem;border-color:transparent transparent #fff}

.select_options{display:none;position:absolute;top:100%;right:0;left:0;z-index:999;margin:0;padding:0;list-style:none;background-color:#ab3326;border:.1rem solid #ab3326;max-height:42.3rem;overflow-y:auto}
.select_options::-webkit-scrollbar{width:.7rem;height:.7rem}
.select_options::-webkit-scrollbar-track{background:#000;-webkit-border-radius:0;border-radius:0}
.select_options::-webkit-scrollbar-thumb{background:#962d22}
.select_options li{margin:0;padding:1.2rem 0;text-indent:1.5rem;border-top:.1rem solid #962d22;-webkit-transition:all .15s ease-in;-o-transition:all .15s ease-in;-moz-transition:all .15s ease-in;transition:all .15s ease-in}
.select_options li[rel=""]{display:none}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.select_styled:hover{background-color:#b83729}
	.select_options li:hover{color:#c0392b;background:#fff}
}

SCSS

/* Vars */
$select-color:           #ffffff;
$select-background:      #c0392b;
$cb:                     #000000;

.select {
	cursor: pointer;
	display: inline-block;
	position: relative;
	font-size: 1.6rem;
	color: $select-color;
	width: 100%;
	height: 3.8rem;
}

.select_hidden {
	display: none;
	visibility: hidden;
	padding-right: 1rem;
}

.select_styled {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: $select-background;
	padding: .8rem 1.5rem;
	user-select: none;
	transition: all 0.2s ease-in;
	
	&::after {
		content:"";
		width: 0;
		height: 0;
		border: .7rem solid transparent;
		border-color: $select-color transparent transparent transparent;
		position: absolute;
		top: 1.6rem;
		right: 1rem;
	}
	
	&:active, &.active {
		background-color: darken($select-background, 5);
		
		&::after {
			top: .9rem;
			border-color: transparent transparent $select-color transparent;
		}
	}
}

.select_options {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	left: 0;
	z-index: 999;
	margin: 0;
	padding: 0;
	list-style: none;
	background-color: darken($select-background, 5);
	border: 0.1rem solid darken($select-background, 5);
	max-height: 42.3rem;
	overflow-y: auto;
	
	&::-webkit-scrollbar {width: .7rem; height: .7rem;}
	&::-webkit-scrollbar-track {background: $cb; border-radius: 0;}
	&::-webkit-scrollbar-thumb {background: darken($select-background, 10);}
	
	li {
		margin: 0;
		padding: 1.2rem 0;
		text-indent: 1.5rem;
		border-top: .1rem solid darken($select-background, 10);
		transition: all 0.15s ease-in;
		
		&[rel=""] {
			display: none;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.select_styled {
		&:hover {
			background-color: darken($select-background, 2);
		}
	}
	
	.select_options {
		li {
			&:hover {
				color: $select-background;
				background: $select-color;
			}
		}
	}
}

JavaScript

function selectCustom() {
	$('.custom_select').each(function(){
		var $this = $(this), numberOfOptions = $(this).children('option').length;
		
		$this.addClass('select_hidden');
		$this.wrap('<div class="select"></div>');
		$this.after('<div class="select_styled"></div>');
		
		var $styledSelect = $this.next('div.select_styled');
		$styledSelect.text($this.children('option').eq(0).text());
		
		var $list = $('<ul />', {
			'class': 'select_options'
		}).insertAfter($styledSelect);
		
		for (var i = 0; i < numberOfOptions; i++) {
			$('<li />', {
				text: $this.children('option').eq(i).text(),
				rel: $this.children('option').eq(i).val()
			}).appendTo($list);
		}
		
		var $listItems = $list.children('li');
		
		$styledSelect.click(function(e) {
			e.stopPropagation();
			$('div.select_styled.active').not(this).each(function(){
				$(this).removeClass('active').next('ul.select_options').hide();
			});
			$(this).toggleClass('active').next('ul.select_options').toggle();
		});
		
		$listItems.click(function(e) {
			e.stopPropagation();
			$styledSelect.text($(this).text()).removeClass('active');
			$this.val($(this).attr('rel'));
			$list.hide();
		});
		
		$(document).click(function() {
			$styledSelect.removeClass('active');
			$list.hide();
		});
	});
}

selectCustom();