Custom select box

[mhulse]

Could use more work:

.selecter { margin: 1rem 0; }
.selecter select {
	border: 2px solid #0f81b2;
	background: #fff;
	width: 100%;
	max-width: 50%;
	padding: 1rem;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	background: url(../images/select-arrows.svg) no-repeat calc(100% - 1rem) center;
	background-size: 0.8rem;
}

<div class="selecter">
	<select>
		<option selected>Pick a method</option>
		<option>Email</option>
		<option>Text Message</option>
		<option>Email and Text Message</option>
	</select>
</div>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 136.88889 333">
  <title>Select box arrows</title>
  <g>
    <path d="M136.88889,213.88889a20.65833,20.65833,0,0,1-2.53993,10.46875L74.46007,328.57986Q71.92013,333,68.44444,333t-6.01562-4.42014L2.53993,224.35764a22.84432,22.84432,0,0,1,0-20.9375Q5.07986,199,8.55556,199H128.33333q3.4757,0,6.01563,4.42014A20.65833,20.65833,0,0,1,136.88889,213.88889Z"/>
    <path d="M0,119.11111a20.65833,20.65833,0,0,1,2.53993-10.46875L62.42882,4.42014Q64.96875,0,68.44444,0t6.01563,4.42014L134.349,108.64236a22.84432,22.84432,0,0,1,0,20.9375Q131.809,134,128.33333,134H8.55556q-3.4757,0-6.01562-4.42014A20.65833,20.65833,0,0,1,0,119.11111Z"/>
  </g>
</svg>