如何使用箭头和分隔符选择下拉样式？

Question

这就是我到目前为止选择框的样式：

需要进行更改：

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>

Answer 1

尝试使用以下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;}