Overriding Jquery Mobile Css for button

Question

I have 2 screenshots. In the first screenshot i am using the jqmobile and in the second file i am not.

This has an impact on how the ok button looks like.

I was wondering is it possible to override some css and get the ok button to look like in the 2nd screenshot while still using the jqm libraries?

Answer 1

You can add data-role="none" to the button to prevent jQM from enhancing it:

<button id="btn" data-role="none" >Button</button>

Answer 2

The previous answer (preventing enhancing) can be useful for preventing jqm from touching the button, but may not help if you actually want that enhanced button functionality.

You can sometimes brute force change a single DOM element using a CSS id selector (use your fav search engine to learn more about "CSS Selectors"), but that's not a great option if you need to do this repeatedly, which is more likely. Another option is to !important your CSS style for your button(s), but I prefer to only use !important as a last resort as it's a heavy hammer that can prevent a downstream component from overriding the style if/as it needs to.

NOTE - UI toolkits such as jqm, dojo et al, sometimes take your single DOM element and expand them with wrapping elements (divs, spans etc) and style those, so you cannot always style what you thought was in the original html and have it affect the entirety of what the UI toolkit generated for you. For each UI toolkit, look at what they recommend for custom styles/themes (and search in the above search box - there are a number of questions in SO about styling jq widgets).

If you need to customize the jqm look rather than prevent jqm from enhancing a single button, then look at the jqmobile theme documentation. http://demos.jquerymobile.com/1.2.0/docs/api/themes.html

(and yes, I considered that parts of this answer might be better off in a "comment" but SO won't let me comment with this new account until you vote up some of my answers :-).