CSS for fancy select / dropdown menu arrows in modern browsers

selectmenu.css

/**
 * See it in action http://demos.tiffanybbrown.com/2014/select-menu/
 **/

/**
 * For later versions of Firefox, Safari, Chrome, and Opera 
 **/
select {
	-webkit-appearance: none; /* Safari, Chrome, Opera, etc */
	   -moz-appearance: none; /* Firefox */
	box-sizing: border-box;
	border-radius: 3px;
	height: 42px;
	padding: 8px;
	width: 100%;
	background-image: url(downarrow.svg) 99.5% center no-repeat;
	background-size: 12px auto;
	border: 1px solid #333; 
}

/**
 * Internet Explorer 10+ doesn't support appearance, but
 * it does support the custom -ms-expand pseudo-element. 
 * -ms-expand styles the dropdown arrow.
 **/

select::-ms-expand {
	border: 0;
    text-indent: -9999px; /* Hides the default arrow */
    background: transparent url(downarrow.svg); /* Replaces it with an image of your choice */
}