Question:

Why won't my CSS styles apply correctly to a widget?

Answer:

This is probably because the element you see in the markup (button, form element, etc.) isn't the same after enhancements have been applied. In order to style elements and add behavior, jQuery Mobile modifies the original markup with additional classes and elements which could impact your CSS selectors. Use a web inspector to view the post-enhancement markup to find the right selectors to use.

Let's look at an example to illustrate the enhancements. Here is the starting markup for a button:

// Button before enhancement
<button>Button element</button>

After enhancement, the button markup has been modified by the framework to add classes and wrap the contents for styling:

// Button after enhancement
<div data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-icon="null" data-iconpos="null" data-theme="c" class="ui-btn ui-shadow ui-btn-corner-all ui-btn-up-c" aria-disabled="false">
	<span class="ui-btn-inner ui-btn-corner-all">
		<span class="ui-btn-text">Button element</span>
	</span>
	<button class="ui-btn-hidden" aria-disabled="false">Button element</button>
</div>

As you can see from the code snippet above the markup has significantly changed after enhancement. The original button you added has ben wrapped in a div and had several spans added. The original button you added is now also hidden. To change the visual styling of the button you must target the new enhanced markup not the button you added.

All Questions & Answers