html - 如何使用箭头和分隔线设置选择下拉菜单的样式？

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