我们在 CSS 中使用图像来重新设置我们的选择字段的样式，并且它们会在所有主浏览器中显示，除了在 Opera 中不显示图像。
我创建了一个 JSfiddle 来说明我也在尝试寻找解决方案。在 Opera 中尝试一下，您就会明白我的意思。
http://jsfiddle.net/muhi101/Gj29j/9/
谢谢
穆希
问问题
1604 次
2 回答
0
Styling a select element is not 100% supported in all browsers.
You may want to try this jquery ui: https://github.com/fnagel/jquery-ui that let's you design your own select list element.
于 2012-08-13T10:25:53.613 回答
0
设置实际选择框的样式是不切实际的，尤其是在需要完整的跨浏览器支持的情况下。最好的办法是隐藏选择框并创建一个样式模仿它。有两种基本方法可以做到这一点，jQuery 插件适用于这两种方法。
隐藏和伪造按钮
重新设置选择框样式的最安全方法（只要不需要 IE6 支持）是将选择框的不透明度设置为 0（使其完全透明）并将其放置在根据需要设置样式的 div 顶部（仅不透明度影响选择框的按钮部分，而不是下拉部分）。用户看到样式化的按钮，但所有 UI 事件都由实际按钮处理。这种方法适用于除 IE6 之外的所有浏览器（不支持在选择框上使用不透明度）。
有关这方面的示例，请参阅jQuery Uniform的演示。
这是在不影响可用性和可访问性的情况下可以设置选择框的样式。而且这种方法很简单，如果需要，人们可以自行实现，无需插件或 jQuery。这种方法的局限性在于下拉菜单的样式很少，尽管按钮本身可以完全样式化。
隐藏和伪造整个选择框
另一种选择是完全隐藏选择框并用完全样式的模仿替换按钮和下拉菜单。在这种情况下，所有 UI 事件都将由模仿处理。
有关这方面的几个示例，请参阅jqTransform和UI Selectmenu 的演示。
使用这种方法，按钮和下拉菜单都可以完全设置样式，但是会失去可用性和可访问性。它通常不能很好地支持屏幕阅读器，并且当用户单击触摸设备上的选择框时，他们不会得到本机选择器弹出窗口。此外，这种方法对于大多数人来说过于复杂，无法在不使用插件的情况下实现。
于 2012-08-13T13:01:52.383 回答