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

Question

我们使用CSS中的图像来重新调整我们的选择区域，并且在除Opera外的所有主要浏览器中都显示图像不显示。

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

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

感谢

Muhi

Answer 1

一个的样式选择元件不是100％在所有的浏览器都支持。

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

Answer 2

设计实际的选择框并不实际，特别是如果需要完整的跨浏览器支持时。最好的选择是隐藏选择框并创建一个样式的模仿。有两种基本的方法可以做到这一点，jQuery插件可用于两者。

隐藏和假按钮

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

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

这是只要选择框可以样式化而不会影响可用性和可访问性。而且这种方法非常简单，可以让人们在需要时自行实现，无需插件或无jQuery。这种方法的局限性在于下拉菜单的样式很少，尽管按钮本身可以完全样式化。

隐藏和伪造的整个选择框

另一种选择是完全隐藏的选择框，一个完全风格模仿代替两个按钮和下拉菜单。在这种情况下，所有UI事件都将由模仿处理。

有关这方面的几个示例，请参阅jqTransform和UI Selectmenu的演示。

使用这种方法，按钮和下拉菜单都可以完全样式化，但是可用性和可访问性都有所损失。它通常不支持屏幕阅读器，当用户点击触摸设备上的选择框时，它们不会得到本地选择器弹出窗口。而且，对于大多数人来说，这种方法对于不使用插件来说太复杂了。