Pure CSS Select Menu/Dropdown: How to make custom right arrow?

Question

I am using a custom select/dropdown menu per the solution here: https://stackoverflow.com/a/10190884/1318135

This functions great, except that the 'arrow' on the right does not look very good. I would like it to be wider, similar in appearance to the up/down vote arrows on this site (look left).

Attempted the following, open to a solution using any of these or other options:
-Integrating an image into HTML (could not get it to show in foreground v. dropdown)
-Location a font with a wider arrow for the character (could not find one)
-Setting background-image property in CSS (displayed default down arrow instead)

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

HTML:

<label class="custom-select">
<select>
<option>Sushi</option>
<option>Blue cheese with crackers</option>
<option>Steak</option>
<option>Other</option>
</select>
</label>

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

Answer 1

Maybe a "little shorte and thanks to SVG also nice on Retina" Version!

  select:not([multiple]){
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' fill='silver'><polygon points='0,0 8,0 4,4'/></svg>") no-repeat scroll 95% 60% transparent;
    padding:.5em 1.5em .5em .5em;
  }

Example Preview https://jsfiddle.net/4mwL03uz/

Idea from: Remove border radius from Select tag in bootstrap 3

Answer 2

You can also use content:"\25BC"; which is simply the black down arrow escaped in Unicode. As seen here: http://unicode-table.com/en/25BC/