How to "turn off" jQuery Mobile's styling of <select> drop downs?

I need to turn off jQuery Mobile's styling of <select> drop downs. Ultimately I'd like the device itself (iPhone, Android, Blackberry, etc.) to determine how the <select> drop down looks.

Currently my 开发者_如何学JAVAmarkup is (option quantity reduced for display purposes):

<div data-role="fieldcontain">
    <label for="state">State:</label>
    <select name="state" id="state" data-role="none">
        <option value="MA">Massachusetts</option> 
        <option value="MI">Michigan</option> 
        <option value="MN" selected="selected">Minnesota</option> 
        <option value="MS">Mississippi</option> 
    </select> 
</div>

I tried using data-role="none" on the <select> but nothing changed.

Is there a way to "turn off" jQuery Mobile for just the select drop down?

according to http://jquerymobile.com/test/docs/forms/docs-forms.html

If you'd prefer that a particular form control be left untouched by jQuery Mobile, simply give that element the attribute data-role="none". For example:

<label for="foo">
<select name="foo" id="foo"  data-role="none">
<option value="a" >A</option>
<option value="b" >B</option>
<option value="c" >C</option>
</select>

Since Version 1.1 the right way to do it is: data-enhance="false"

You will also need to add this line to config:

$.mobile.ignoreContentEnabled = true;

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Inside mobileinit, fix the jQM selector to behave as expected:

$.mobile.selectmenu.prototype.options.initSelector = 'select:not( :jqmData(role="none"), :jqmData(role="slider") )';

Although this question is considered answered already, I'd like to add some more lines, since the answer didn't work "out-of-the-box" for me, and this might save some time for others.

In my case, I'm disabling the native dropdowns for a smartphone application when it runs into Android (since it has some ugly issues when opening native dropdowns, reported already in another thread). The "magic spell" that solved the problem to me is just the following lines:

$(document).bind('mobileinit',function(){
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) {
        $("select").attr("data-native-menu","true");
    } else {
        $("select").attr("data-native-menu","false");
        $.mobile.selectmenu.prototype.options.nativeMenu = false;
    }               
});  

These lines are in a customization script loaded just after jQuery and just before jQuery-Mobile. It's important to keep the order, otherwise the controls are already initialized and it has no effect!

I hope this advice can save some time to someone!

Yes, you have to go into the CSS file that controls the JQuery Mobile UI dropdown(s) style and remove any styling you don't want to appear.

They're still working on it, works in latest git code but I wouldnt recommend it: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Using this property should help

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...

just try data-native-menu="true"

from doc : By adding the data-native-menu="true" attribute to the select, the framework will use the browser's native select menu when the select button is clicked. Because this option doesn't use any of the custom menu parsing and menu generation logic, it is significantly faster than the custom menu version. The custom select menus add the ability to theme the select and provide visual consistency across platforms In addition, it fixes over some missing functionality on certain platforms: optgroup support on Android, multi-select capability on WebOS, and adds an elegant way to handle placeholder values.

for more info