我在这里根据解决方案使用自定义选择/下拉菜单：https ://stackoverflow.com/a/10190884/1318135
这个功能很好，只是右边的“箭头”看起来不太好。我希望它更宽，在外观上类似于本网站上的向上/向下投票箭头（向左看）。
尝试了以下，使用这些或其他选项中的任何一个打开解决方案：
- 将图像集成到 HTML 中（无法使其在前景 v. 下拉列表中显示）
- 使用更宽的字符箭头定位字体（找不到一）
- 在 CSS 中设置 background-image 属性（改为显示默认向下箭头）
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;
}