Styling a <select> dropdown - html

Question

I am trying to style a <select> dropdown to look something similar to this. As in I want the grey background on page load and then the blue-ish color when it is active.
Here is what I have gotten so far. The main thing I'm trying to figure out is the colored block with the arrow to the right of the element.
select {
background: url(media/icons/down_arrow.png) no-repeat 90% ;
background-size: 15px 10px;
height: 30px;
overflow: hidden;
width: 100px;
font-size: 14px;
padding: 5px 10px;
border: 2px solid #777;
border-radius: 10px;
background-color: #EEE;
color: #000;
-webkit-appearance: none;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}
select:active, select:focus, select:hover {
border: 2px solid #55E;
}
<select>
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>
P.S. the png is just a down arrow that is 15px x 10px

Answer 1

You can consider gradient coloration
select {
background:
/*to replace the arrow*/
linear-gradient(to bottom right,#fff 48%,transparent 50%) right 7px top 50%/8px 10px,
linear-gradient(to bottom left,#fff 48%,transparent 50%) right 15px top 50%/8px 10px,
/* remove the above gradient and uncomment the below to use your arrow
url(media/icons/down_arrow.png) right 5px top 50%/15px 10px,
*/
var(--c,linear-gradient(#939393,#595959)) right/30px 100%,
linear-gradient(#fffff9,#cfced5);
background-repeat:no-repeat;
font-size: 18px;
padding:10px 40px 10px 10px;
border: 2px solid #777;
border-radius: 10px;
color: #000;
-webkit-appearance: none;
box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.5);
}
select:active, select:focus, select:hover {
border: 2px solid #55E;
/*Used a variable to avoid repeating all the background definition*/
--c:linear-gradient(#6c81b7,#264091);
}
<select>
<option>1000</option>
<option>2000</option>
<option>3000</option>
<option>4000</option>
<option>5000</option>
</select>