Чистый CSS Select Menu/Dropdown :Как сделать пользовательскую стрелку вправо?

Я использую настраиваемое меню выбора/выпадающего списка для решения здесь:https://stackoverflow.com/a/10190884/1318135

Это прекрасно работает, за исключением того, что «стрелка» справа выглядит не очень хорошо. Хотелось бы, чтобы она была шире, похожей на стрелки голосования вверх/вниз на этом сайте (посмотрите влево ).

Предпринимались следующие попытки, открытые для решения с использованием любого из этих или других вариантов:
-Интеграция изображения в HTML (не смогла отобразить его на переднем плане по сравнению с раскрывающимся списком)
-Расположение шрифта с более широкой стрелкой для символа (не удалось найти)
-Установка свойства фонового изображения -в CSS (вместо отображения стрелки вниз по умолчанию)

http://jsfiddle.net/XxkSC/553/

HTML:

Sushi
Blue cheese with crackers
Steak
Other

CSS:

label.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;
}