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

Issue with styling a select box

本文关键字：问题 样式 选择 设置      更新时间：2023-09-26

我在这里看到了很多关于这个问题的帖子，但我不能很快解决这个问题。

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

示例 1：不透明度 = 0，div 没有背景图像。 事件触发，但看不到任何内容。

示例 2：不透明度 = 0，div 有我的背景图像。 在Firefox，Chrome和Safari中完美运行，但在IE中则不然。

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

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

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

作为记录，我已经在我的示例#2中尝试了.click，.change，.live（"click"）.live（"change"）.live（"click change"），.on（"click"），.on（"change"）.on（"click change"），在我的示例#2中测试它。 我的最终问题是为什么示例 2 在 ie 中不起作用。 次要问题是不透明度及其对选择框的影响是什么？ 我假设了外观：没有我在那里，但我仍然不明白为什么不透明度对它很重要。 如果您需要我发布帐户代码，我可以。 但是你应该能够通过我提供的测试页面看到javascript和css。

你应该嵌套类似于

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

然后，您可以在.styled-dropdown-container上添加click事件侦听器。事件将从下拉列表中正确显示（冒泡），当用户手动关注您的输入时（即通过 Tab 键进入它）也会被模拟

相关文章：