JQuery Mobile Change font size for all elements on page

Question

JQuery Mobile application development allows users to change the font size on the settings page. I placed a div on the TEXT WRAPPER page and changed the font size to reflect all the elements. But each jQuery Mobile user interface element has its own CSS class and overrides the TEXT WRAPPER font size.

Here is a simple example of my page:

<div class="txtWrapper">
...
...
<input type="button" data-icon="arrow-r" data-iconpos="right"
value="Start Something" id="btnStart">
...

I managed to change the font size of txtWrapper, but the input tag will have the span.ui-btn-inner CSS class, and this class has the font size: 16px

How to change font size for all elements in JQUery Mobile applications?

Answer 1

selectmenu div .

<div data-role="header">
    <select data-mini="true" data-inline="true" class="ui-btn-left" id="font-size">
        <option value="16px">Default</option>
        <option value="10px">10px</option>
        <option value="11px">11px</option>
        <option value="12px">12px</option>
        <option value="13px">13px</option>
        <option value="14px">14px</option>
        <option value="15px">15px</option>
    </select>
     <h1>Header</h1>
</div>

div

$("#font-size").on("change", function () {
    $("#contents *").css({
        "font-size": $(this).val()
    });
});

, , DOM. div.