Single select form with custom styles and arrow (incl. work-around for Mozilla select arrow bug). Form selector element could also be substituted by a wrapping span or div element for forms with multiple fields.

single-select-form.html

<form class="ordering" method="get">
    <select name="name">
		<option value="value">Option</option>
		<option value="value">Option</option>
		<option value="value">Option</option>
	</select>
</form>

single-select-form.scss

/* Transition */
%transition-background-color {
    -webkit-transition: background-color .25s;
	-moz-transition: 	background-color .25s;
	-ms-transition: 	background-color .25s;
	-o-transition: 		background-color .25s;
	transition: 		background-color .25s;
}

/* Select form */
.ordering {
	background-color: black;
	overflow: hidden;
	@extend %transition-background-color;
	
	&:hover {
		background-color: red;
		cursor: pointer;
	}
	
	&:before,
	select {
		font-size: 16px;
		font-size: 1rem;
		line-height: 1.625;
	}
	
	&:before {
		color: white;
		content: "\f078"; 	/* FontAwesome chevron-down */
		font-family: "FontAwesome";
		margin: 0 0 12px 0;
		margin: 0 0 0.75rem 0;
		padding: 8px 0;
		padding: 0.5rem 0;
		position: absolute;
		right: 0;
		z-index: 0;
	}
	
	select {
		background: transparent;
		border: none;
		border-radius: 0;
		box-sizing: border-box;
		cursor: pointer;
		display: block;
		color: white;
		margin: 0;
		padding: 8px 12px;
		padding: 0.5rem 0.75rem;
		position: relative;
		width: 100%;
		z-index: 1;
		-webkit-appearance:	none;
		-moz-appearance:	window; /* avoids arrow bug (http://mzl.la/nWH24W) */
	}
}