Let me start by saying that you probably shouldn't do this. Stick to letting the browser render its default look for form elements as much as possible. They will be more familiar to your users that way. That said, let's say you've been told to customize these arrows a little bit, here's how you can do it.
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: 24px;
background-image: url("data:image/svg+xml;utf8,<svg fill='%23808285' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position-x: right;
background-position-y: 50%;
}
A few things to note...
The appearance rules will remove all browser specific styling for the select element, not just on the arrow itself. In other words, you might need to add some more CSS to get it back to looking as you want it to.
Do not use this method if you need to support Internet Explorer 11, it won't work.
You need to encode the # character that's used when setting the color using the fill attribute on the SVG element. For example, something like <svg fill="#ffffff"></svg> would become <svg fill="%23ffffff"></svg> instead.