设置选择框的问题

Question

我在这里看到了很多关于此事的帖子，但我无法快速做到这一点。

我正在尝试使用自定义图像设置选择框的样式。我设置它的方法是为选择框设置opacity:0;，用背景图像设置它背后的div，并使用javascript在div中设置当前选择的值。我有它在Firefox，Chrome和Safari中工作但在IE中没有运气。

示例1：opacity = 0，没有div的背景图片。事件发生但没有任何可见。

示例2：opacity = 0，div具有我的背景图像。适用于Firefox，Chrome和Safari，但不适用于IE。

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

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

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

为了记录，我尝试过.click，.change，.live（“click”）。live（“change”）。live（“click change”）,. on（“click”）,. on（在我的例子＃2中“改变”）.on（“点击改变”），直到在4个浏览器中测试它。我的最终问题是为什么示例2不适用于ie。次要问题是不透明度及其对选择框的影响？我假设有一些外观：我没有在那里，但我仍然不明白为什么不透明度很重要。如果你需要我发布我能的代码。但是你应该能够通过我提供的测试页面看到javascript和css。

Answer 1

您应该嵌套类似于

的元素

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

然后，您可以在click上添加.styled-dropdown-container事件监听器。事件将从下拉列表中正确地预测（冒泡），并且当用户手动关注您的输入时（即通过跳转到它）也会模拟事件。