Styled select box.

styled-select.scss

$grey: rgb(153,153,153);
$lightgrey: rgb(204,204,204);
$white: rgb(255,255,255);
$blue: rgb(0,188,188);

.styled-select {
	background: $white url("../img/select-arrow.png") right center no-repeat;
	border: $input_border;
	border-radius: 5px;
	width: 100%;
	height: 4rem;
	margin-bottom: 1rem;
	overflow: hidden;
	-webkit-appearance: none;
	
	&:hover { border-color: rgba($blue,0.3); }
	
	&.focus{
		border-color: $blue;
		outline: none;
		box-shadow: 0 0 0.5rem rgba($blue,0.5);
	}
	
	&.disabled {
		background-color: rgba($lightgrey,50%);
		
		select{ cursor: not-allowed; }
	
		&:hover { border: 1px solid $grey; }
	}

	select {
		background: transparent;
		border: 0 !important;
		border-radius: 0;
		color: $grey;
		font-size: 1.8rem;
		width: 115%;
        height: 4rem;
		padding: 1rem 1.5rem;
		outline: none;
	}
}