When jQuery Mobile is loaded on a page, it will automatically enhance certain page elements, including form controls. If you're using Mobiscroll Forms on the same page, the form controls will end up having both jQuery Mobile and Mobiscroll stylings applied.

To prevent this, you need to tell jQuery Mobile to prevent enhancement on certain parts of the page.

Method 1: Using data-enhance="false"

Using the data-enhance="false" attribute with the ignoreContentEnabled option.

You can add the data-enhance="false" attribute on the Mobiscroll Form container. This will prevent jQuery Mobile to enhance the container and everything inside.

To make this work, you will also need to set the ignoreContentEnabled option in the mobileinit event.

Example:

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4-5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () { 
            $.mobile.ignoreContentEnabled = true;
        });
    </script>
    <script src="http://code.jquery.com/mobile/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div data-enhance="false" mbsc-form>
            <label>
                Email
                <input type="email">
            </label>
            <label>
                Password
                <input type="password">
            </label>
        </div>
    </div>
</body>

</html>

Method 2: Using the keepNative option

Using the keepNative option.

You globally disable enhancement on certain elements with the keepNative option of jQuery Mobile inside the mobileinit event:

<!DOCTYPE html> 
<html>
<head>
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4-5.min.css" />
    <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script>
        $(document).on("mobileinit", function () { 
            $.mobile.page.prototype.options.keepNative = "select,input,button";
        });
    </script>
    <script src="http://code.jquery.com/mobile/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>
    <div data-role="page">
        <div mbsc-form>
            <label>
                Email
                <input type="email">
            </label>
            <label>
                Password
                <input type="password">
            </label>
        </div>
    </div>
</body>

</html>

What's next?

Download the jQuery Mobile starter and see how you can use Mobiscroll controls with the jQuery Mobile look & feel.