Html CSS选择框箭头样式

我想从选择框中删除默认箭头，并想使用自定义图标。从前面的答案中，我发现这是不可能的（要使它在主流浏览器上工作）。唯一的可能是将select封装在div中，并将其宽度设置为大于div宽度，然后设置overflow:HINDED。 我试着跟随，但不起作用。我做错了什么

。选择父项{
宽度：80px；
溢出：隐藏；
}
.选择父项选择{
宽度：100px；
-webkit外观：无；
-moz外观：无；
外观：无；
填充：2px 30px 2px 2px；
边界：无；
背景：透明url（“http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png）右中心无重复；
}

选择1
选择2

尝试更换

padding: 2px 30px 2px 2px;

与

---

它应该可以工作。

请按照如下方式操作：

。选择父项{
宽度：120px；
溢出：隐藏；
}
.selectParent选择{
显示：块；
宽度：100%；
填充：2px25px 2px2px；
边界：无；
背景：url（“http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png）右中心不重复；
外观：无；
-webkit外观：无；
-moz外观：无；
}
.selectParent.left选择{
方向：rtl；
填充：2px2px25px；
背景位置：左中；
}
/*对于IE和Edge*/
选择：：-ms展开{
显示：无；
}

选择1
选择2


选择1
选择2

谢谢，但我的自定义图标仍然没有出现。

padding: 2px 2px 2px 2px;