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
Override ui-btn-active.
.ui-btn-active {
background-image: none !important;
background: none !important;
border: none !important;
}