Updated custom selects with Font Awesome Icons

custom-selects.less

	/* Container used for styling the custom select, the buttom class below adds the
	 * bg gradient, corners, etc. */
	.custom-select {
		position: relative;
		display: block;
	    select {
	    	width: 100%;
		    margin: 0;
		    height: 50px;
		    border: 1px solid #CCC;
		    border-radius: 3px;
		    outline: none;
		    padding: .6em .8em .5em .8em;
		    color: #888888;

		    /* Prefixed box-sizing rules necessary for older browsers */
		    -webkit-box-sizing: border-box;
		    -moz-box-sizing: border-box;
		    box-sizing: border-box;

		    /* Font size must be 16px to prevent iOS page zoom on focus */
		    font-size: 16px;
	      
	      /* Custom arrow sits on top of the select - could be an image, SVG, icon font,
	       * etc. or the arrow could just baked into the bg image on the select. */
	      &::after {
	        content: " ";
	        position: absolute;
	        top: 50%;
	        right: 1em;
	        z-index: 2;
	        /* These hacks make the select behind the arrow clickable in some browsers */
	        pointer-events: none;
	        display: none;
	      }
	  }
	}

	@supports ( -webkit-appearance: none ) or ( appearance: none )
		or ( ( -moz-appearance: none ) and ( mask-type: alpha ) ) {
		
		/* Show custom arrow */
		.custom-select::after {
			display: block;
		}

		/* Remove select styling */
		.custom-select select {
			padding-right: 2em; /* Match-01 */
			/* inside @supports so that iOS <= 8 display the native arrow */
			background: white; /* Match-04 */
			/* inside @supports so that Android <= 4.3 display the native arrow */
			border: 1px solid transparent; /* Match-05 */
	  
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
		}
		.custom-select select:focus {
			border-color: #aaa; /* Match-03 */
		}
	}

	/* Adds Firefox < 35 support */
	@-moz-document url-prefix() {
		/* Warning: this kills the focus outline style */
		.custom-select {
			overflow: hidden;
		}
		.custom-select::after {
			display: block;
		}
		/* Make the native select extra wide so the arrow is clipped. 1.5em seems to be enough to safely clip it */
		.custom-select select {
			overflow: -moz-hidden-unscrollable;
			padding-right: .4em;
			background: #fff; /* Match-04 */
			border: 1px solid transparent; /* Match-05 */
			/* Firefox < 4 */
			min-width: 6em;
			width: 130%;
			/* Firefox 4-15 */
			min-width: -moz-calc(0em);
			width: -moz-calc(100% + 2.4em);
			/* Firefox 16+ */
			min-width: calc(0em);
			width: calc(100% + 2.4em);
		}

		/* Firefox 35+ that supports hiding the native select can have a proper 100% width, no need for the overflow clip trick */
		@supports ( mask-type: alpha ) {
			.custom-select {
				overflow: visible;
			}
			.custom-select select {
				-moz-appearance: none;
				width: 100%;
				padding-right: 2em; /* Match-01 padding-right */
			}
		}
	}

	/* Firefox focus has odd artifacts around the text, this kills that. See https://developer.mozilla.org/en-US/docs/Web/CSS/:-moz-focusring */
	.custom-select select:-moz-focusring {
		color: transparent;
		text-shadow: 0 0 0 #000;
	}

	/* IE 10/11+ */
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {  
		.custom-select select::-ms-expand {
			display: none;
		}
		.custom-select select:focus {
			border-color: #aaa; /* Match-03 */
		}
		.custom-select select:focus::-ms-value {
			background: transparent;
			color: #222; /* Match-02*/
		}
		.custom-select select {
			padding-right: 2em; /* Match-01 */
			background: none; /* Match-04 */
			border: 1px solid transparent; /* Match-05 */
		}
		.custom-select::after {
			display: block;
		}
	}

	.custom-select::after {
	    content:"\f107";
	    font-family: 'FontAwesome';
	    color: @red;
	    position: absolute;
	    top: 14px;
	    right: 1.5em;
	    z-index: 2;
	    pointer-events: none;
	    width: 0;
	    height: 0;
	    margin-top: -3px;
	}