选择样式列表，图像叠加在Opera中不起作用

Question

我们正在CSS中使用图像来重新设置我们的选择字段，并且它们在所有主浏览器中都会显示，但在Opera中不显示图像。

我已经创建了一个JSfiddle来说明我正在尝试寻找解决方案。在Opera中试一试，你会看到我的意思。

http://jsfiddle.net/muhi101/Gj29j/9/

由于

Muhi

Answer 1

并非所有浏览器都支持对select元素进行样式设置。

您可能想尝试使用这个jquery ui：https://github.com/fnagel/jquery-ui，让您设计自己的选择列表元素。

Answer 2

设置实际选择框的样式是不切实际的，尤其是在需要完全跨浏览器支持的情况下。最好的办法是隐藏选择框并创建一个风格模仿它。有两种基本方法可以做到这一点，两者都有jQuery插件。

隐藏和伪造按钮

重新选择框的最安全方法（只要不支持IE6支持）就是给选择框增加0的不透明度（使其完全透明）并将其置于根据需要设置样式的div之上（不透明度仅影响选择框的按钮部分，而不影响下拉部分）。用户看到样式化按钮，但所有UI事件都由实际按钮处理。此方法适用于除IE6之外的所有浏览器（不支持在选择框上使用不透明度）。

有关此示例，请参阅jQuery Uniform的演示。

只要选择框可以设置样式而不会影响可用性和可访问性。这种方法很简单，如果需要的话，有人可以自己实现，没有插件或没有jQuery。这种方法的局限在于下拉菜单的样式很少，尽管按钮本身可以完全设置样式。

隐藏和伪造整个选择框

另一个选项是完全隐藏选择框，并用完全样式的模仿替换按钮和下拉菜单。在这种情况下，所有UI事件都将由模仿处理。

有关此示例，请参阅jqTransform和UI Selectmenu的演示。

使用这种方法，按钮和下拉菜单都可以完全设置样式，但是缺少可用性和可访问性。它通常不支持屏幕阅读器，当用户点击触摸设备上的选择框时，他们将无法获得本机选择器弹出窗口。此外，这种方法对于大多数人而言并不太复杂，无需使用插件。