html-select - 帮助 html 选择替换

Question

我讨厌默认的选择控件，那是因为它无法在 IE 中使用 CSS 进行样式设置。这就是为什么我使用 HTML + CSS + JavaScript 从头开始​​开发一个新的选择控件。过去两天我在将 CSS 和 HTML 匹配在一起方面做得很好，但今天我发现了一个看起来很难修复的错误。

在 IE 7 中，当我在同一页面上有两个控件时，顶部的一个不会覆盖底部的一个。

查看图片:coolrgb dot com/files/select-help.jpg

下载演示页面(HTML + CSS + Javascript):coolrgb dot com/files/select-help.zip

请帮助我，这个控件对我来说看起来非常好，我想从现在开始在我的所有项目中使用它。这个错误毁掉了我的希望和很多时间。

谢谢。

Answer 1

如果您为每个控件指定相同的 z-index，那么您将无法控制堆叠顺序。

我建议修改您的控件，使其行为更像真正的 SELECT 元素:一次只能打开一个，否则失去焦点会导致其关闭。或者，您可以在控件具有焦点时设置较高的 z 索引，在没有焦点时设置较低的 z 索引。

另一件事需要注意:尝试将一些其他控件(例如单选按钮、复选框和选择)置于您的控制之下。您可能会发现，即使您给它们提供了不同的 z-index，IE 也不会将鼠标悬停在这些内容上(正如 @grawity 在他的回答中所解释的那样)。这就是为什么您通常会看到小部件演示显示在这些元素的顶部，如下所示:http://jqueryui.com/demos/dialog/

解决这个问题的典型方法是使用 iframe，但这可能完全值得一个不同的问题。