Opera Mobile and jQuery Mobile Select menus display bug

Question

There is a bug in jQuery mobile with Opera Mobile which displays the default select over the custom one from jQuery Mobile, see the screenshot below directly taken from jQuery Mobile's website!

Here's the code used by jQuery mobile to hide the select:

.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;
}

Is there any way to hide it as it does on the iPhone and Android default browsers?

Answer 1

I've created a separate CSS-file for the Opera and the following class-overriding worked for me:

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

Also, there is needed to remove the .ui-select-nativeonly class from the .ui-select .ui-btn elements. I've used jQuery for that:

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

});