Search code examples
jqueryhtmlmobilemobile-website

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 markup 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?

Solution

  • 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>