How to remove jQuery Mobile styling?

Solution 1:

Methods of markup enhancement prevention:

This can be done in few ways, sometimes you will need to combine them to achieve a desired result.

  • Method 1:

    It can do it by adding this attribute:

    data-enhance="false"
    

    to the header, content, footer container.

    This also needs to be turned in the app loading phase:

    $(document).on("mobileinit", function () {
        $.mobile.ignoreContentEnabled=true;
    });
    

    Initialize it before jquery-mobile.js is initialized (look at the example below).

    More about this can be found here:

    http://jquerymobile.com/test/docs/pages/page-scripting.html

    Example: http://jsfiddle.net/Gajotres/UZwpj/

    To recreate a page again use this:

    $('#index').live('pagebeforeshow', function (event) {
        $.mobile.ignoreContentEnabled = false;
        $(this).attr('data-enhance','true');
        $(this).trigger("pagecreate")
    });
    
  • Method 2:

    Second option is to do it manually with this line:

    data-role="none"
    

    Example: http://jsfiddle.net/Gajotres/LqDke/

  • Method 3:

    Certain HTML elements can be prevented from markup enhancement:

     $(document).bind('mobileinit',function(){
          $.mobile.keepNative = "select,input"; /* jQuery Mobile 1.4 and higher */
          //$.mobile.page.prototype.options.keepNative = "select, input"; /* jQuery Mobile 1.4 and lower */
     });    
    

    Example: http://jsfiddle.net/Gajotres/gAGtS/

    Again initialize it before jquery-mobile.js is initialized (look at the example below).

Read more about it in my other tutorial: jQuery Mobile: Markup Enhancement of dynamically added content

Solution 2:

...or just use the official, theme-less version of the CSS built specifically to allow the design of a custom theme while maintaining all of jQuery Mobile functionality.

You don't have to fight with hacks and overrides all the time and you get a lighter CSS.

Win-win.

edit: Also answered here