Override Jquery Mobile CSS

Question

Is it possible to override the already styled JQuery Mobile elements (buttons, lists etc) with a separate custom css file?

If so how would I go about referencing the

Answer 1

There is a huge misconception about using your own styles with JQM that I have found everywhere, including SO. The trick to using your own CSS with JQM is in how you write your own CSS. In general, you must first specify the element you wish to overide the JQM CSS with an id, and then attach the JQM class to that ID. For example, to remove the JQM standard link border CSS from an image link, where #img_button_1 is the ID given to the anchor parent of the image, you would code your CSS like so...

The HTML...

Your override CSS...

#img_button_1 .ui-btn-inner { border: 0 }

I answered this before with some working examples that can be found here

Jquery Mobile - Using image as link - Blue line below image

You can use the same technique for resolving all your JQM CSS conflicts. Now you can reconsider using JQM to achieve your desired results knowing how simple it is to resolve these conflicts by using CSS specicivity in your own CSS. Hope this helps!