select field custom arrow: cross browser

by pixeloco

HTML

<div class="dropdown custom-select">
        <select id="states">
          <option value="AL">Alabama</option>
          <option value="AK">Alaska</option>
          <option value="AZ">Arizona</option>
          <option value="AR">Arkansas</option>
        </select>
    </div>

CSS

/* Container used for styling the custom select, the buttom class below adds the bg gradient, corners, etc. */
.custom-select
	position: relative
	display: block
	margin-top: 0.5em
	padding: 0


/* These are the "theme" styles for our button applied via separate button class, style as you like */
.dropdown
	border: 4px solid navy
	border-radius: 0
	box-shadow: none
	background: transparent


//This is the native select, we're making everything but the text invisible so we can see the button styles in the wrapper */
.custom-select select
	width: 100%
	margin: 0
	background: none
	border: 1px solid transparent
	outline: none
	// Remove select styling
	appearance: none
	-webkit-appearance: none
	// Font size must the 16px or larger to prevent iOS page zoom on focus
	font-size: 16px
	// General select styles: change as needed */
	font-family: helvetica, sans-serif
	font-weight: bold
	color: #444
	padding: 10px



// Custom arrow sits on top of the select */
.custom-select::after 
	content: ""
	position: absolute
	width: 15px
	height: 15px
	top: 50%
	right: 1em
	margin-top: -4px
	background-image: url('http://mpotestio.web01.sundaramdesign.com/wp-content/themes/mp/images/arrow-down.svg')
	background-repeat: no-repeat
	background-size: 15px auto
	z-index: 2
	/* These hacks make the select behind the arrow clickable in some browsers */
	pointer-events: none


/* Hover style */
.custom-select:hover
	border-color: blue


/* Focus style */
.custom-select select:focus 
	outline: none
	box-shadow: none

/* Set options to normal weight */
.custom-select option
	font-weight: normal







/* ------------------------------------  */
/* START OF UGLY BROWSER-SPECIFIC HACKS */
/* ----------------------------------  */

/* OPERA - Pre-Blink nix the custom arrow, go with a native select button to keep it simple. Targeted via this hack http://browserhacks.com/#hack-a3f166304aafed524566bc6814e1d5c7 */
x:-o-prefocus, .custom-select::after
	display: none


/* IE 10/11+ - This hides...

JavaScript

note: example won't show up correct because styles are SASS