jquery mobile remove active theme

Question

Here's a JSfiddle. But just in case - Here's some code for a typical navbar using jquery mobile.

<div data-role='navbar' data-theme='a' id='nav' data-iconpos='left'>
    <ul>
        <li><a href='#' data-role='button' data-icon='home' id='home'>HOME</a>
        <div id='homeX' class='navBtn act' style='float:left;'></div></li>
        <li><a href='#' data-role='button' data-icon='grid' id='lists'>LISTS</a>
        <div id='listsX' class='navBtn' style='float:left;'></div></li>
        <li><a href='#' data-role='button' data-icon='search' id='search'>SEARCH</a>
        <div id='searchX' class='navBtn' style='float:left;'></div></li>
        <li><a href='#' data-role='button' data-icon='gear' id='settings'>SETTINGS</a>
        <div id='settingsX' class='navBtn' style='float:left;'></div></li>
    </ul>
</div>

By default, Jquery changes the theme when you select a button from the navbar. I want the theme to remain the same. In this particular example, Jquery changes the theme from "a" to "b", but I want the theme to remain "a".

I have already tried this:

.ui-btn-active{background-color:#000;color:#fff;}

but that changed the color to pure black and not the black theme that jquery mobile uses.

Does anyone know how to prevent the active state from changing themes?

Again, heres a JSfiddle

Answer 1

Override ui-btn-active.

.ui-btn-active {
 background-image: none !important;
 background: none !important;
 border: none !important;
}

Demo