Html 选择带有自定义图标的输入

我有一个选择输入，我已禁用默认浏览器外观，如下所示

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearence: none;
}

我想使用自定义箭头，以便展开和折叠选择菜单。我尝试过各种js技巧，但没有一种方法能真正正确工作

我已经考虑过使用纯css使选择输入与z索引2透明。因此，触发器将落在适当的位置并显示为按钮

---

这是背景，但我无法使其工作。

您可以尝试在选择框上设置背景。 ID样式似乎对选择框不起作用，所以您更倾向于直接选择（如果您有多个选择框，请将它们包装起来）

---

像这样的东西可能行得通，我是根据我带来的这个来定位的。希望这有帮助。

您的解决方案可以工作，但如果我有一个长文本的选择，它看起来非常混乱。图像顶部的文本等。有没有办法避免这种情况？这可以通过将背景定位到右中心来解决，我更新了上面的代码示例。+1'd，但我不知道我是否同意“ID样式似乎不适用于选择框”——我可以在Chrome中这样做，而不存在任何问题。

    select {
      padding: 2px 2px 2px 2px;
      border: none; 
      background-image: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png");
      background-position: right center; /*Positioning*/
      background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }