Upgrade button from jQuery Mobile 1.1 to 1.4

Question

Using jQuery Mobile 1.1.1 the following code:

<input type="button" id="submitButton" class="ui-btn-right" value="Login" data-theme="custom" data-inline="true" />

Generate the following HTML elements:

<div class="ui-btn ui-btn-inline ui-shadow ui-btn-corner-all ui-fullsize ui-btn-right ui-btn-up-custom" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="custom" data-inline="true" data-mini="false" aria-disabled="false">
    <span class="ui-btn-inner ui-btn-corner-all">
    <span class="ui-btn-text">Login</span>
    </span>
    <input id="submitButton" class="ui-btn-right ui-btn-hidden" type="button" data-inline="true" data-theme="custom" value="Login" aria-disabled="false">
    </div>
    </div>

Example in jsfiddle

I need migrate to jQuery Mobile 1.4.3

I follow official jQuery Mobile 1.4 upgrade guide

Now, following code:

<input type="button" id="submitButton" class="ui-btn-custom ui-btn-up-custom ui-shadow ui-corner-all" value="Login" data-inline="true" data-mini="false" aria-disabled="false"/>

Generate following HTML elements:

<div class="ui-btn ui-input-btn ui-corner-all ui-shadow ui-btn-inline">
Login
<input id="submitButton" class="ui-btn-custom ui-btn-up-custom ui-shadow ui-corner-all" type="button" aria-disabled="false" data-mini="false" data-inline="true" value="Login">
</div>

Example in jsfiddle

New button styles are very different from the old jQuery Mobile versions. Is there an easy way to keep the old style with the new version of jQuery Mobile?

Similar question How to get “old-style” rounded 3d buttons in newer jQuery Mobile 1.4+

I would like have the same styles and html elements if it is posible, so this questions is incomplete for me.

Answer 1

You can change styles but you can't change the structure. jQuery Mobile had made significant changes in latest version (1.4) for performance purposes.

Looking at both buttons, the main differences are border-radius and font-weight. You have two options to achieve what you want, both solutions are pure CSS.

1. The below will apply to all .ui-btn whether they are input, button or a.

   • HTML

     <input type="button" id="submitButton" value="Login" />
     

   • CSS

     .ui-btn.ui-corner-all {
        border-radius: 1em;
        font-weight: normal;
     }
     

2. Target specific elements by creating a custom class and adding it to target elements as an attribute data-wrapper-class="custom".

   • HTML

     <input type="button" value="Login" data-wrapper-class="custom" />
     

   • CSS

     .ui-btn.ui-corner-all.custom {
        border-radius: 1em;
        font-weight: normal;
     }
     

Demo