Javascript 设置选择框的样式时出现问题

我在这里看到了很多关于这方面的帖子，但我不能很快把它弄对

我正在尝试使用自定义图像设置选择框的样式。我设置它的方式是设置不透明度：0；对于选择框，在其后面设置一个带有背景图像的div，并使用javascript在div内设置当前选择的值。我在Firefox、Chrome和Safari中都可以使用它，但在IE中没有运气

示例1:opacity=0，没有div.Event激发的背景图像，但什么都不可见

示例2:opacity=0，div有我的背景图像。在Firefox、Chrome和Safari中都能完美工作，但在IE中却不行

示例3:Opacity=1，div没有背景图像。事件不会触发，正常的选择行为似乎不存在

示例4:Opacity=1，div有我的背景图像。事件不会激发，并且正常的选择行为似乎不存在

注意：我从示例3和示例4中删除了opacity:1，但仍然得到相同的行为。我还在选择框上使用z-index 50，在div上使用z-index 0，以确保它们显示在选择框后面。然而，相反的情况似乎并没有提供不同的行为

---

作为记录，我在示例2中尝试了.click、.change、.liveclick.livechange.liveclick更改、.onclick、.onchange.onclick更改，并在4种浏览器中进行了测试。我的最终问题是为什么示例2在ie中不起作用。次要问题是不透明性及其对选择框的影响是什么？我假设了一些和外观有关的东西：里面并没有，但我仍然不明白为什么不透明对它很重要。如果你需要我发布账号，我可以。但是您应该能够通过我提供的测试页面看到javascript和css

<div class="styled-dropdown-container">
     <select>...</select>
</div>

---

然后可以在.styled下拉容器上添加一个单击事件侦听器。事件将从下拉列表中正确弹出，并且当用户手动关注您的输入时（即通过切换到输入），也将模拟事件

示例2在IE 9中运行良好。示例2在IE9中也适用于我。但在IE8及更高版本中不起作用。或者，你可以把你的select和背景图像一起放在div中，就像我在这个提琴中做的那样-它不会在IE8或更早版本中显示你的图像，但至少select可以工作。很抱歉这么晚才回复。是的，现在我在家里安装了IE9，看来示例2工作正常。感谢您提供的快速示例Ana，这似乎是实现我所需的最佳方式，如果他们的浏览器支持，则一切正常，如果不支持，则默认为常规选择框。现在我不认为我可以检查你的回答作为解决方案，因为这是一个评论。如果你能发帖子重申你在评论中所说的话，我会给你一张支票。谢谢