Html 选择框箭头的css

我想在选择框中添加下拉箭头。我已尝试，但箭头显示在选择框后面。我想将箭头放置在选择框中

。表单项自定义搜索类型：：之前{
内容：''；
显示：块；
边框：9px实心透明；
边框顶部颜色：#4d1c73；
位置：绝对位置；
/*右：-17px*/
顶部：钙（50%-2px）；
}
.表单项自定义搜索类型选择{
外观：无；
-moz外观：无；
-webkit外观：无；
}

寻找
全部的
公告
文章日志
论坛
画廊
文件

您缺少一个相对于其父div的

位置

.form-item{ 
  position: relative;
  display: inline-block;
}
.form-item-custom-search-types::before {
      right: 5px;
      top: calc(50% - 3px);
   }


。表单项自定义搜索类型：：之前{
内容：''；
显示：块；
边框：9px实心透明；
边框顶部颜色：#4d1c73；
位置：绝对位置；
/*右：-17px*/
顶部：钙（50%-2px）；
}
.表单项自定义搜索类型选择{
外观：无；
-moz外观：无；
-webkit外观：无；
}
/*增加*/
.表格项目{
位置：相对位置；
显示：内联块；
}
.form项自定义搜索类型：：之前{
右：5px；
顶部：计算（50%-3倍）；
}

寻找
AllannounceSarticlesBlogsFrumsGalleriesDocuments
这里最好的解决方案是将背景图像放入选择框，如下所示：

.custom-search-selector{
   background: url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-
   arrow-up-b-128.png) no-repeat right;
    background-size: 16%; 
} 


。表单项自定义搜索类型选择{
外观：无；
-moz外观：无；
-webkit外观：无；
}
/*增加*/
.自定义搜索选择器{
背景：url(http://cdn4.iconfinder.com/data/icons/ionicons/512/icon-arrow-up-b-128.png)没有重复权；
背景大小：16%；
}

寻找
AllannouncesArticlesBlogsFullsGalleriesDocuments
此解决方案不好，因为当您单击箭头时，选择将不会打开，如果你把一个全宽的表格项目。箭头将移到右边可能是我们可以在一个相对的容器中包装选择框。我刚刚发布了一个解决方案建议，在这里你只需添加一个好大小的图像，最好使用svg图像和删除背景大小：16%；我已经添加了一个可能的副本