Html 如何使用箭头和分隔符设置“选择”下拉列表的样式？

到目前为止，我是这样设计选择框的：

所需更改：

1）箭头应在中间。 2） 箭头图像层必须大于选择框，以便其颜色为黑色，并且在背景中不是现在的透明。 3） 必须在箭头左侧添加分隔符

这是我对上述选择框的css：

.styled select {
   font-size: 16px;
   outline:none;
   z-index:100 !important;
} 

.styled{
   height: 40px;
   border-radius: 3px;
   background: url("../img/down.png") 96%/ 15% no-repeat;
   z-index:1000 !important;
}

和html：

<div class="styled">
                  <select name="sorty" id="sorty">
                    <option class='sort' selected disabled>Sort by</option>
                    <option value="review">Review Count</option>
                    <option value="score">Review Score</option>
                    <option value="price_down">Price ($)</option>
                    <option value="price_up">Price ($$$)</option>
                    <option value="distance">Distance (Nearest)</option>
                  </select>
                 </div>

排序
审查计数
复习成绩
价格（元）
价格（元）
距离（最近）

尝试使用下面的css，它可能会对您有所帮助

    .styled select {height: 40px;border: 0;color: #acacac; background: url(http://maps.vermont.gov/Geocortex/Essentials/ANR/REST/sites/StreamAlterations/viewers/StreamAlterations/VirtualDirectory/Resources/Images/Icons/arrow-down-small-16.png) #FFF right 10px no-repeat;
-webkit-appearance: none;-moz-appearance: none;appearance: none;padding-right: 52px;padding-left: 13px;}

---

使用jquerymultiselectlibrary@devpro，但我只需要设置样式。您是否尝试在选择框中设置样式类？在选择框中应用类这将起作用这将增加高度，但图像仍保持在顶部。如何将它推到中间，并增加垂直分隔符？@ Keren，你可以按下（右20px的背景位置）按下图像，否则请将jsFoDeldLink与图像连接起来？@ Keren，请你给我提供动态的下行PNG图像链接？我将在jsfiddle.thankshere中演示：但我无法将图像正确地放在框内。@Keren请看一看，并在图像本身（down.png）中留出适当的空间，因为在本演示中，向下箭头是向右插入的。所以，请在图像本身的正确空间。