Opera Mobile 和 jQuery Mobile Select 菜单显示错误答案

【问题标题】：Opera Mobile and jQuery Mobile Select menus display bugOpera Mobile 和 jQuery Mobile Select 菜单显示错误
【发布时间】：2012-06-16 20:59:16
【问题描述】：

在带有 Opera Mobile 的 jQuery mobile 中存在一个错误，它显示默认选择而不是来自 jQuery Mobile 的自定义选择，请参见下面直接从 jQuery Mobile 网站截取的屏幕截图！

这是 jQuery mobile 用来隐藏选择的代码：

.ui-select .ui-btn select {
    cursor: pointer;
    -webkit-appearance: button;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 1.5em;
    min-height: 100%;
    height: 3em;
    max-height: 100%;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    filter: alpha(opacity=0);
    z-index: 2;
}

有没有办法像在 iPhone 和 Android 默认浏览器上那样隐藏它？

【问题讨论】：

标签： jquery css jquery-mobile select-menu opera-mobile

【解决方案1】：

我为 Opera 创建了一个单独的 CSS 文件，下面的类覆盖对我有用：

.ui-select .ui-btn select {
  opacity: 0 !important;
}

此外，还需要从 .ui-select .ui-btn 元素中删除 .ui-select-nativeonly 类。我为此使用了 jQuery：

$(function() {
  /**
   * Opera selectors drawings
   */
  $('.ui-select .ui-btn').removeClass('ui-select-nativeonly');

});

【讨论】：