あなたはCSS :after疑似要素でそれを行うことができます

html

<div class="custom-select">
<select>
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</div>

CSS

div.custom-select {
position: relative;
display: inline-block;
  }

.custom-select select {
display: inline-block;
padding: 4px 3px 3px 5px;
margin: 0;
font: inherit;
outline:none; /* remove focus ring from Webkit */
line-height: 1.2;
background: #000;
color:white;
border:0;
}

/* Select arrow styling */
.custom-select:after {
content: "▼";  /* Current arrow I would like to change */
position: absolute;
top: 0;
right: 0;
bottom: 0;
font-size: 60%;
line-height: 30px;
padding: 0 7px;
background: #000;
color: white;
}

.no-pointer-events .custom-select:after {
content: none;
}